Laravel-mix: Error while compiling CSS in production
Versions:
- Laravel Mix Version: 4.0.14 (
npm list --depth=0) - Node Version (
node -v): 10.15.0 - NPM Version (
npm -v): 6.4.1 - OS: Windows 10 (10.0.17763)
Description:
When I'm trying to build my Vue app in production with $ npm run production, it returns me a CssSyntaxError with description C:\css\app.css:12446:13: Missed semicolon, followed by a huge bunch of lines that I don't understand, though it works very well when I run the development version with $ npm run dev or $ npm run watch
Here is the full log report:
> @ production C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier
> node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules
--config=node_modules/laravel-mix/setup/webpack.config.js
CssSyntaxError: C:\css\app.css:12446:13: Missed semicolon
at Input.error (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\input.js:130:16)
at Parser.checkMissedSemicolon (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\parser.js:603:22)
at Parser.decl (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\parser.js:286:46)
at Parser.other (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\parser.js:166:12)
at Parser.parse (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\parser.js:77:16)
at parse (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\parse.js:17:12)
at new LazyResult (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\lazy-result.js:60:16)
at Processor.<anonymous> (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\processor.js:138:12)
at Processor.process (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\processor.js:117:23)
at Function.creator.process (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\postcss\lib\postcss.js:148:43)
at OptimizeCssAssetsWebpackPlugin.processCss (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\optimize-css-assets-webpack-plugin\src\index.js:65:21)
at Object.processor (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\optimize-css-assets-webpack-plugin\src\index.js:11:18)
at each (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\last-call-webpack-plugin\src\index.js:150:10)
at arrayEach (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\lodash\_arrayEach.js:15:9)
at forEach (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\lodash\forEach.js:38:10)
at OptimizeCssAssetsWebpackPlugin.process (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\last-call-webpack-plugin\src\index.js:147:5)
at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\last-call-webpack-plugin\src\index.js:178:28)
at _err0 (eval at create (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\tapable\lib\HookCodeFactory.js:32:10), <anonymous>:13:17)
at taskRunner.run (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\terser-webpack-plugin\dist\index.js:318:9)
at step (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\terser-webpack-plugin\dist\TaskRunner.js:83:9)
at done (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\terser-webpack-plugin\dist\TaskRunner.js:94:30)
at tryCatcher (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\util.js:16:23)
at Promise._settlePromiseFromHandler (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:512:31)
at Promise._settlePromise (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:569:18)
at Promise._settlePromise0 (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:614:10)
at Promise._settlePromises (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:694:18)
at Promise._fulfill (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:638:18)
at Promise._resolveCallback (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:432:57)
at Promise._settlePromiseFromHandler (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:524:17)
at Promise._settlePromise (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:569:18)
at Promise._settlePromise0 (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:614:10)
at Promise._settlePromises (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:694:18)
at Promise._fulfill
```(C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:638:18)
at Promise._resolveCallback (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:432:57)
at Promise._settlePromiseFromHandler (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:524:17)
at Promise._settlePromise (C:\Users\tsimeon\Repositories\SVN\partagerfichier\Web\V2\partagerfichier\node_modules\bluebird\js\release\promise.js:569:18)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! @ production: `node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the @ production script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! C:\Users\tsimeon\AppData\Roaming\npm-cache\_logs\2019-02-07T17_22_30_052Z-debug.log
Here is also my dependencies when I type $ npm list --depth=0:
+-- @fortawesome/[email protected]
+-- @fortawesome/[email protected]
+-- @fortawesome/[email protected]
+-- @fortawesome/[email protected]
+-- @fortawesome/[email protected]
+-- @websanova/[email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
+-- [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
npm ERR! missing: [email protected], required by [email protected]
And finaly here is the content of my config files
webpack.mix.js
const path = require('path')
const mix = require('laravel-mix')
mix
.js('resources/js/app.js', 'public/js')
.sass('resources/sass/app.scss', 'public/css').options({
postCss: [require('postcss-scss')]
})
.sourceMaps()
.disableNotifications()
if (mix.inProduction()) {
mix.version()
mix.extract([
'vue',
'vform',
'axios',
'vuex',
'jquery',
'popper.js',
'vue-i18n',
'vue-meta',
'js-cookie',
'bootstrap',
'vue-router',
'sweetalert2',
'@fortawesome/vue-fontawesome',
'@fortawesome/fontawesome-svg-core'
])
}
mix.webpackConfig({
resolve: {
extensions: ['.js', '.json', '.vue'],
alias: {
'~': path.join(__dirname, './resources/js')
}
},
output: {
chunkFilename: 'js/[name].[chunkhash].js',
publicPath: mix.config.hmr ? '//localhost:8080': '/'
}
})
package.json
{
"private": true,
"scripts": {
"dev": "npm run development",
"development": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack/bin/webpack.js --watch --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "node node_modules/cross-env/dist/bin/cross-env.js NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
},
"devDependencies": {
"babel-eslint": "^8.0.2",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"babel-plugin-transform-class-properties": "^6.24.1",
"compression-webpack-plugin": "^2.0.0",
"cross-env": "^5.2.0",
"eslint": "^5.12.1",
"eslint-config-standard": "^12.0.0",
"eslint-plugin-import": "^2.15.0",
"eslint-plugin-node": "^7.0.1",
"eslint-plugin-promise": "^4.0.1",
"eslint-plugin-standard": "^4.0.0",
"eslint-plugin-vue": "^5.0.0-beta.3",
"laravel-mix": "^4.0.14",
"resolve-url-loader": "^2.3.1",
"sass": "^1.16.1",
"sass-loader": "^7.1.0",
"vue-template-compiler": "^2.5.22",
"webpack-bundle-analyzer": "^2.11.2"
},
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^1.2.13",
"@fortawesome/free-brands-svg-icons": "^5.7.0",
"@fortawesome/free-regular-svg-icons": "^5.7.0",
"@fortawesome/free-solid-svg-icons": "^5.7.0",
"@fortawesome/vue-fontawesome": "^0.1.5",
"@websanova/vue-auth": "^2.21.14-beta",
"axios": "^0.18.0",
"bootstrap": "^4.1.1",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"moment": "^2.24.0",
"object-to-formdata": "^1.5.2",
"popper.js": "^1.14.3",
"postcss-scss": "^2.0.0",
"sweetalert2": "^7.19.3",
"vform": "^1.0.0",
"vue": "^2.5.22",
"vue-axios": "^2.1.4",
"vue-i18n": "^8.7.0",
"vue-meta": "^1.5.0",
"vue-moment": "^4.0.0",
"vue-router": "^3.0.1",
"vuex": "^3.1.0",
"vuex-router-sync": "^5.0.0"
}
}
.babelrc
{
"plugins": [
"syntax-dynamic-import",
"transform-class-properties"
]
}
I obviously already checked all the .scss files and all the .vue files scoped styles for a missing semicolon but everything seems to be alright.
Does anyone have any idea to help me with that? Did I forget to configure something ?
Thank's in advance and have a good day !
Tcheikovski
All 10 comments
Do you happen to have any dynamic imports? Because I had dynamic imports and got this error when I removed the dynamic imports my issue was resolved.
eriktisme
on 13 Feb 2019
I had the same issue. I my case moment.js cause this issue. I replaced moment.js with date-fns. (#1968)
lukasleitsch
on 13 Feb 2019
Thank you for your answers.
I eventually found out where the issue came from by looking into the corrupted css file that was created. As you say, the problem was the dynamic import of moment.js. But while I really love this package I couldn't resign to just get rid of it, so I just installed the vue-moment package which includes the moment.js instance into the Vue object. It resolved my problems and helped me clean my files (having the same import moment from 'moment' statement on almost every .vue files was a little frustrating)
So thanks again and don't hesitate to use vue-moment package if you face (or not) this problem 😃
Tcheikovski
on 19 Feb 2019
For my project, I found a solution. I disabled moment locales and retained english only
First you need to install moment locales plug-in
npm install --save-dev moment-locales-webpack-plugin
then update your webpack.mix.js
// Import the plugin
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
// Update your mix plugins
mix.js('resources/js/app.js', 'public/js').webpackConfig({
plugins: [
// To strip all locales except “en”
new MomentLocalesPlugin(),
],
// Other config goes here
});
````
Please not this solution (hack) will not work if your intend to import other locales other than English
The following will not work
```javascript
// Or: To strip all locales except “en”, “es-us” and “ru”
// (“en” is built into Moment and can’t be removed)
new MomentLocalesPlugin({
localesToKeep: ['es-us', 'ru'],
}),
I continued to use dynamic imports while maintaining moment js
njoguamos
on 18 Apr 2019
in your webpack plugin just add
new webpack.IgnorePlugin(/^.\/locale$/, /moment$/)
it should probably fix it
RavenOfTime
on 10 Jul 2019
Great catch, removal of moment as a dependency and adoption of vue-moment also saved this quickly for me.
defaye
on 24 Jul 2019
I have following dynamic import
require(`@assets/images/flags/${this.$i18n.locale}.png`)
I get CssSyntaxError: /css/app.css:3:14: Missed semicolon error.
If I run yarn dev / yarn watch it works fine but while running yarn build I get this error.
Changing above code to following resolve the error:
require(`@assets/images/flags/en.png`)
In short dynamic image does not work but static image does.
Does anyone have idea on this?
vrushank
on 26 Sep 2019
For my project, I found a solution. I disabled moment locales and retained english only
First you need to install moment locales plug-in
npm install --save-dev moment-locales-webpack-pluginthen update your webpack.mix.js
// Import the plugin const MomentLocalesPlugin = require('moment-locales-webpack-plugin'); // Update your mix plugins mix.js('resources/js/app.js', 'public/js').webpackConfig({ plugins: [ // To strip all locales except “en” new MomentLocalesPlugin(), ], // Other config goes here });Please not this solution (hack) will not work if your intend to import other locales other than English
The following will not work
// Or: To strip all locales except “en”, “es-us” and “ru” // (“en” is built into Moment and can’t be removed) new MomentLocalesPlugin({ localesToKeep: ['es-us', 'ru'], }),I continued to use dynamic imports while maintaining moment js
This solution works for me. Thank you @njoguamos
abhisheksarmah
on 29 Oct 2019
I have following dynamic import
require(`@assets/images/flags/${this.$i18n.locale}.png`)I get
CssSyntaxError: /css/app.css:3:14: Missed semicolonerror.If I run yarn dev / yarn watch it works fine but while running yarn build I get this error.
Changing above code to following resolve the error:
require(`@assets/images/flags/en.png`)In short dynamic image does not work but static image does.
Does anyone have idea on this?
@vrushank got solution? I am facing this problem today. Exctly same as yours/.
nezaboravi
on 28 Nov 2019
For my project, I found a solution. I disabled moment locales and retained english only
First you need to install moment locales plug-in
npm install --save-dev moment-locales-webpack-plugin
This didn't work for me.
The solution that worked for me:
In webpack.mix.js:
.webpackConfig({
externals: {
moment: 'moment'
},
// ...
})
Good luck! 💡
Yiddishe-Kop
on 1 Oct 2020
Related issues
pixieaka
·
3Comments
mstralka
·
3Comments
Cheddam
·
3Comments
jpmurray
·
3Comments
terion-name
·
3Comments
Most helpful comment
For my project, I found a solution. I disabled moment locales and retained english only
First you need to install moment locales plug-in
then update your webpack.mix.js
See moment documentation
I continued to use dynamic imports while maintaining moment js