I'm a bit new to webpack and TailwindCSS. The stack we are using here is Laravel with Tailwind and predefined template.
I'm trying to start NPM but get the following error:
ERROR in No configuration provided for
....../resources/css/app.css
My webpack.mix.js has
mix.js('resources/js/main.js', 'public/js')
.postCss('resources/css/app.css', 'public/css', [
require("tailwindcss"),
]);
And webpack.config.js has:
const config = require('./site.config');
const loaders = require('./webpack.loaders');
const plugins = require('./webpack.plugins');
module.exports = {
context: path.join(config.root, config.paths.src),
entry: [
path.join(config.root, config.paths.src, 'js/main.js'),
path.join(config.root, config.paths.src, 'css/style.scss'),
],
output: {
path: path.join(config.root, config.paths.dist),
publicPath: '',
filename: '[name].[hash].js',
},
mode: ['production', 'development'].includes(config.env)
? config.env
: 'development',
devtool: config.env === 'production'
? 'hidden-source-map'
: 'cheap-eval-source-map',
devServer: {
contentBase: path.join(config.root, config.paths.src),
watchContentBase: true,
hot: true,
open: true,
host: config.dev_host,
},
module: {
rules: loaders,
},
stats: 'errors-only',
plugins,
};
There is no where a reference of app.css... What am I doing wrong.
Related
I'm using Rollup on a Sapper project found here: https://github.com/darryl-snow/perfect-cookie
Yesterday I ran npm update and since then when I run npm run dev I get the following error:
✗ client
Invalid CSS after "...-features: list": expected expression (e.g. 1px, bold), was ".append($available-"
✗ server
Invalid CSS after "...-features: list": expected expression (e.g. 1px, bold), was ".append($available-"
internal/modules/cjs/loader.js:985
throw err;
^
My rollup config:
import resolve from '#rollup/plugin-node-resolve'
import replace from '#rollup/plugin-replace'
import commonjs from '#rollup/plugin-commonjs'
import svelte from 'rollup-plugin-svelte'
import postcss from 'rollup-plugin-postcss'
import babel from 'rollup-plugin-babel'
import { terser } from 'rollup-plugin-terser'
import config from 'sapper/config/rollup.js'
import pkg from './package.json'
const mode = process.env.NODE_ENV
const dev = mode === 'development'
const legacy = !!process.env.SAPPER_LEGACY_BUILD
const onwarn = (warning, onwarn) =>
(warning.code === 'CIRCULAR_DEPENDENCY' && /[/\\]#sapper[/\\]/.test(warning.message)) || onwarn(warning)
const postcssOptions = () => ({
extensions: ['.scss', '.sass'],
extract: false,
minimize: true,
use: [
[
'sass',
{
includePaths: ['./src/theme', './node_modules'],
},
],
],
})
export default {
client: {
input: config.client.input(),
output: config.client.output(),
plugins: [
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
dev,
hydratable: true,
emitCss: true,
}),
resolve({
browser: true,
dedupe: ['svelte'],
}),
commonjs(),
postcss(postcssOptions()),
legacy &&
babel({
extensions: ['.js', '.mjs', '.html', '.svelte'],
runtimeHelpers: true,
exclude: ['node_modules/#babel/**'],
presets: [
[
'#babel/preset-env',
{
targets: '> 0.25%, not dead',
},
],
],
plugins: [
'#babel/plugin-syntax-dynamic-import',
[
'#babel/plugin-transform-runtime',
{
useESModules: true,
},
],
],
}),
!dev &&
terser({
module: true,
}),
],
onwarn,
},
server: {
input: config.server.input(),
output: config.server.output(),
plugins: [
replace({
'process.browser': false,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
svelte({
generate: 'ssr',
dev,
}),
resolve({
dedupe: ['svelte'],
}),
commonjs(),
postcss(postcssOptions()),
],
external: Object.keys(pkg.dependencies).concat(
require('module').builtinModules || Object.keys(process.binding('natives'))
),
onwarn,
},
serviceworker: {
input: config.serviceworker.input(),
output: config.serviceworker.output(),
plugins: [
resolve(),
replace({
'process.browser': true,
'process.env.NODE_ENV': JSON.stringify(mode),
}),
commonjs(),
!dev && terser(),
],
onwarn,
},
}
I've tried rm -rf ./node_modules && npm install but still getting the same error. It looks like commonJS is loading dependencies and finding one where it's expecting CSS but getting Sass... I'm completely new to rollup, any ideas?
You should probably consider installing the latest major version of #rollup/plugin-commonjs. The one you're currently using has a bug with Sapper (which I've encountered while running your repo instead of the one in the question) and it was fixed in the later versions.
After upgrading that, your project seems to start up fine.
While you're at it, upgrade the other major version upgrades, very likely that most of them will go by without errors.
I would like to load 2 locales en-gb and fr-ch only from Moment.js , then assign the moment class to the scopewindow to use the library everywhere in my Vuejs components.
Currently, my app.js has this require line:
window.moment = require('moment')
I am suspecting it can be accomplished thanks to the solutions here (adding IgnorePlugin and ContextReplacementPlugin to webpack.config.js):
plugins.push(new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /en-gb|fr-ch/))
module.exports.plugins = plugins;
OR
plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/))
module.exports.plugins = plugins;
Where should you add these pieces of code (webpack.config.js and/or app.js and/or webpack.mix.js) to ignore all other locales when importing momentjs?
mix.webpackConfig({
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
})
Source: https://laracasts.com/discuss/channels/elixir/laravel-mix-prevent-momentjs-locales
mix.webpackConfig( webpack => {
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
]
});
this way you dont have to import webpack on the top of your file, which sometimes can cause errors.
and you also can put other necessary options like this
mix.webpackConfig( webpack => {
plugins: [
new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
],
resolve: {
extensions: ['.js', '.vue'],
alias: {
'#': __dirname + '/resources',
'#root': __dirname,
'#pages': __dirname + '/resources/js/pages'
},
fallback: { "path": false },
},
});
My Module is :
var app = angular.module('customer',
[
'customerAPI',
'uldbfilters',
'ngRoute',
'ui.bootstrap',
'nvd3',
'chart.js',
'ui.bootstrap.datetimepicker',
'ui.dateTimeInput',
'LocalStorageModule',
'ngAnimate',
'ngMaterial'
]);
My karma config file is :
module.exports = function(config) {
config.set({
basePath: '',
frameworks: [
'jasmine',
'jasmine-matchers'
],
files: [
'../../static/bower_components/jquery/dist/jquery.js',
'../../static/bower_components/jquery-*/jquery-*.js',
'../../static/bower_components/jquery-*/**/jquery-*.js',
'../../static/bower_components/angular-charts/chart.js',
'../../static/bower_components/angular/angular.js',
'../../static/bower_components/angular-date-time-input/src/dateTimeInput.js',
'../../static/bower_components/angular-bootstrap-datetimepicker/src/js/datetimepicker.js',
'../../static/bower_components/angular-*/angular-*.js',
'../../static/bower_components/angular-*/**/*.js',
'../../static/rest/app/*.js',
'../../static/rest/app/client/**/*.js',
'test_suits_client/*.js'
],
exclude: [
'../../static/bower_components/angular-*/angular-*.min.js',
'../../static/bower_components/angular-*/**/*.min.js',
'../../static/bower_components/angular-*/**/index.js',
'../../static/bower_components/angular-*/**/gulpfile.js',
'../../static/bower_components/angular-*/**/karma.conf.js',
'../../static/bower_components/angular-*/**/Gruntfile.js',
'../../static/bower_components/angular-*/**/browserify.test.js'
],
preprocessors: {},
reporters: ['spec'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: [
'Firefox'
],
singleRun: false,
concurrency: Infinity
}
My test suite is :
describe('Customer Application uldb module functionality', function() {
beforeEach(module('customer'));
var scope;
beforeEach(inject(function($rootScope){
scope = $rootScope.$new();
}));
it('Sample spec to test 2 + 2', function() {
expect(2 + 2).toEqual(4);
});
});
});
Now when i run karma, It is showing an exception of
minErr/<#/home/vhosts/uldb/static/bower_components/angular/angular.js:68:12
loadModules/<#/home/vhosts/uldb/static/bower_components/angular/angular.js:4640:15
forEach#/home/vhosts/uldb/static/bower_components/angular/angular.js:321:11
loadModules#/home/vhosts/uldb/static/bower_components/angular/angular.js:4601:5
createInjector#/home/vhosts/uldb/static/bower_components/angular/angular.js:4523:19
workFn#/home/vhosts/uldb/static/bower_components/angular-mocks/angular-mocks.js:3074:44
[3]http://localhost:9876/context.js:162:7
This problem is not regarding to $inject and it is purely based on your files loading in karma conf.js. I missed to load a library, in which current loading libraries is dependant on.
enter code herenpm test；
var webpackConfig = require('./webpack.test');
module.exports = function(config) {
config.set({
basePath: '',
frameworks: ['jasmine'],
files: [
{pattern: './karma-shim.js', watched: false}
],
exclude: [
],
preprocessors: {
'./karma-shim.js': ['webpack']
},
webpack: webpackConfig,
plugins:[
'karma-jasmine',
'karma-chrome-launcher',
require("karma-webpack")
],
proxies:{
"/app/": "http://localhost:3000/src/app"
},
reporters: ['progress'],
port: 9876,
colors: true,
logLevel: config.LOG_INFO,
autoWatch: true,
browsers: ['Chrome'],
singleRun: false,
concurrency: Infinity
})
}
module.exports = {
devtool: 'cheap-module-eval-source-map',
resolve: {
extensions: ['','.ts','.js']
},
module: {
loaders: [
//以.ts结尾的文件使用 TypeScript loader
{test: /.ts$/,loader: 'awesome-typescript-loader'},
{
test:/\.html$/,
loader: 'html'
},
{
test:/\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
loader: 'null'
},
{
test:/\.css$/,
loader: 'null'
}
]
}
}
then throws a BUG.
karma start karma.conf.js
keywords if/then/else require v5 option
WebpackOptionsValidationError: Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.
- configuration.entry should be one of these:
object { : string | [string] } | string | [string]
The entry point(s) of the compilation.
- configuration.resolve.extensions[0] should not be empty.
Can not load "webpack"!
First i don't see any entey point mentioned in config file which is required in order to webpack understand where to start from.
Second your resolve option in config file hase mentioned three types to resolve and first one is empty string which webpack don't like so by removing that empty string it should fix that problem
Hope this help you to fix the issue.
I had the same issue and resolved by updating the karma-webpack package to the latest version.
Is it possible to write unit tests for VueJs if you are using Laravel's Elixir for your webpack configuration?
VueJs 2x has a very simple example for a component test: Vue Guide Unit testing
<template>
<span>{{ message }}</span>
</template>
<script>
export default {
data () {
return {
message: 'hello!'
}
},
created () {
this.message = 'bye!'
}
}
</script>
and then...
// Import Vue and the component being tested
import Vue from 'vue'
import MyComponent from 'path/to/MyComponent.vue'
describe('MyComponent', () => {
it('has a created hook', () => {
expect(typeof MyComponent.created).toBe('function')
})
it ...etc
})
and gives an example of a karma conf file here: https://github.com/vuejs-templates
But the Karma configuration file requires a webpack configuration file
webpack: webpackConfig,
The only problem is the Laravel's Elixir is creating the webpack configuration so it can't be included.
I have tried creating another webpack configuration file based on the example from https://github.com/vuejs-templates/webpack.
Something like this:
var path = require('path');
var webpack = require('webpack');
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname, './dist'),
publicPath: '/dist/',
filename: 'build.js'
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader',
options: {
loaders: {
// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
// the "scss" and "sass" values for the lang attribute to the right configs here.
// other preprocessors should work out of the box, no loader config like this necessary.
'scss': 'vue-style-loader!css-loader!sass-loader',
'sass': 'vue-style-loader!css-loader!sass-loader?indentedSyntax'
}
// other vue-loader options go here
}
},
{
test: /\.js$/,
loader: 'babel-loader',
exclude: /node_modules/
},
{
test: /\.(png|jpg|gif|svg)$/,
loader: 'file-loader',
options: {
name: '[name].[ext]?[hash]'
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
devServer: {
historyApiFallback: true,
noInfo: true
},
performance: {
hints: false
},
devtool: '#eval-source-map'
}
and included it like...
// Karma configuration
// Generated on Wed Mar 15 2017 09:47:48 GMT-0500 (CDT)
var webpackConf = require('./karma.webpack.config.js');
delete webpackConf.entry;
module.exports = function(config) {
config.set({
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
But I am getting errors that seem to indicate that webpack isn't doing anything.
ERROR in ./resources/assets/js/components/test.vue
Module parse failed: /var/www/test/resources/assets/js/components/test.vue Unexpected token (1:0)
You may need an appropriate loader to handle this file type.
| <template>
| <span >{{test}}</span>
| </template>
Ok, I got this to work. Couple of things that might help.
I was originally running gulp, and trying to run tests in my vagrant box, to try to match the server configuration. I think that makes it much harder to find examples and answers on the internet.
Ok, so the main problem I was having is that webpack wasn't processing my components included in my test files. I copied the webpack config out of the laravel-elixir-vue-2/index.js node module directly into the Karma configuration file and it started working.
The key is that karma-webpack plugin needs both the resolve and module loader configuration settings (resolve with alias and extensions) for it to work.
Hope this helps someone.
karma.conf.js:
module.exports = function (config) {
config.set({
// to run in additional browsers:
// 1. install corresponding karma launcher
// http://karma-runner.github.io/0.13/config/browsers.html
// 2. add it to the `browsers` array below.
browsers: ['Chrome'],
frameworks: ['jasmine'],
files: ['./index.js'],
preprocessors: {
'./index.js': ['webpack']
},
webpack: {
resolve: {
alias: {
vue: 'vue/dist/vue.common.js'
},
extensions: ['.js', '.vue']
},
vue: {
buble: {
objectAssign: 'Object.assign'
}
},
module: {
loaders: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
},
webpackMiddleware: {
noInfo: true,
},
coverageReporter: {
dir: './coverage',
reporters: [
{ type: 'lcov', subdir: '.' },
{ type: 'text-summary' },
]
},
});
};
I ran into the exact same problem. The accepted answer did not fully work for me. The following solved my issue:
Install relevant loaders for webpack:
npm install --save-dev vue-loader file-loader url-loader
Create webpack config file (note the format). The accepted answer produced errors citing invalid format of the webpack.config.js file. At least with me it did.
webpack.config.js
module.exports = {
module: {
rules: [
{
test: /\.vue$/,
use: [
{ loader: 'vue-loader' }
]
},
{
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [
{
loader: 'file-loader',
query: {
limit: 10000,
name: '../img/[name].[hash:7].[ext]'
}
}
]
},
{
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [
{
loader: 'url-loader',
query: {
limit: 10000,
name: '../fonts/[name].[hash:7].[ext]'
}
}
]
}
]
}
}
karma.conf.js
// Karma configuration
var webpackConf = require('./webpack.config.js');
delete webpackConf.entry
module.exports = function(config) {
config.set({
frameworks: ['jasmine'],
port: 9876, // web server port
colors: true,
logLevel: config.LOG_INFO,
reporters: ['progress'], // dots, progress
autoWatch: true, // enable / disable watching files & then run tests
browsers: ['Chrome'], //'PhantomJS', 'Firefox',
singleRun: true, // if true, Karma captures browsers, runs the tests and exits
concurrency: Infinity, // how many browser should be started simultaneous
webpack: webpackConf, // Pass your webpack.config.js file's content
webpackMiddleware: {
noInfo: true,
stats: 'errors-only'
},
/**
* base path that will be used to resolve all patterns (eg. files, exclude)
* This should be your JS Folder where all source javascript
* files are located.
*/
basePath: './resources/assets/js/',
/**
* list of files / patterns to load in the browser
* The pattern just says load all files within a
* tests directory including subdirectories
**/
files: [
{pattern: 'tests/*.js', watched: false},
{pattern: 'tests/**/*.js', watched: false}
],
// list of files to exclude
exclude: [
],
/**
* pre-process matching files before serving them to the browser
* Add your App entry point as well as your Tests files which should be
* stored under the tests directory in your basePath also this expects
* you to save your tests with a .spec.js file extension. This assumes we
* are writing in ES6 and would run our file through babel before webpack.
*/
preprocessors: {
'app.js': ['webpack', 'babel'],
'tests/**/*.spec.js': ['babel', 'webpack']
},
})
}
Then run karma start and everything should work.