laravel-mix: Missed semicolon error in combination with dynamic components and Moment.js

Laravel Mix 4.0.14
Node Version: v10.15.0
Yarn Version: 1.13.0
OS: macOS 10.14.3

Description:

If I import the moment library in a dynamic component I will get an error in the production build process. I found a workaround to avoid the error. In the steps to reproduce section, I will explain it in detail. The error only appears in the production build process (yarn run production). The dev build process (yarn run dev) runs without any errors.

I don’t know which component actually cause the issue. I hope you can help me to get rid of the workaround.

Steps To Reproduce:

Run laravel new laravel-mix
Run yarn add babel-plugin-syntax-dynamic-import --dev
Run yarn add moment
Create a .babelrc with the following content:

{
    "plugins": ["syntax-dynamic-import"]
}

Run yarn
Replace the line Vue.component('example-component', require('./components/ExampleComponent.vue').default); with Vue.component('example-component', import('./components/ExampleComponent.vue')); in the file resources/js/app.js
Add import moment from 'moment'; in the script tags of resources/js/components/ExampleComponent.vue
Run yarn run production

The build process crash with the error “CssSyntaxError: /css/app.css:3:13: Missed semicolon”

If I add the import import moment from 'moment'; into the first line of resources/js/app.js the build process works without the issue. This workaround is not really nice because the moment lib than also lives in the app.js and not only in the chunk of the component.

CssSyntaxError: /css/app.css:3:13: Missed semicolon

CssSyntaxError: /css/app.css:3:13: Missed semicolon at Input.error (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/input.js:130:16) at Parser.checkMissedSemicolon (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/parser.js:603:22) at Parser.decl (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/parser.js:286:46) at Parser.other (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/parser.js:166:12) at Parser.parse (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/parser.js:77:16) at parse (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/parse.js:17:12) at new LazyResult (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/lazy-result.js:60:16) at Processor.<anonymous> (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/processor.js:138:12) at Processor.process (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/processor.js:117:23) at Function.creator.process (/Users/lukas/Sites/laravel-mix/node_modules/postcss/lib/postcss.js:148:43) at OptimizeCssAssetsWebpackPlugin.processCss (/Users/lukas/Sites/laravel-mix/node_modules/optimize-css-assets-webpack-plugin/src/index.js:65:21) at Object.processor (/Users/lukas/Sites/laravel-mix/node_modules/optimize-css-assets-webpack-plugin/src/index.js:11:18) at each (/Users/lukas/Sites/laravel-mix/node_modules/last-call-webpack-plugin/src/index.js:150:10) at arrayEach (/Users/lukas/Sites/laravel-mix/node_modules/lodash/_arrayEach.js:15:9) at forEach (/Users/lukas/Sites/laravel-mix/node_modules/lodash/forEach.js:38:10) at OptimizeCssAssetsWebpackPlugin.process (/Users/lukas/Sites/laravel-mix/node_modules/last-call-webpack-plugin/src/index.js:147:5) at compilation.hooks.optimizeChunkAssets.tapPromise.chunks (/Users/lukas/Sites/laravel-mix/node_modules/last-call-webpack-plugin/src/index.js:178:28) at _err0 (eval at create (/Users/lukas/Sites/laravel-mix/node_modules/tapable/lib/HookCodeFactory.js:32:10), <anonymous>:13:17) at taskRunner.run (/Users/lukas/Sites/laravel-mix/node_modules/terser-webpack-plugin/dist/index.js:318:9) at step (/Users/lukas/Sites/laravel-mix/node_modules/terser-webpack-plugin/dist/TaskRunner.js:83:9) at _cacache.default.get.then (/Users/lukas/Sites/laravel-mix/node_modules/terser-webpack-plugin/dist/TaskRunner.js:107:15) at tryCatcher (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/util.js:16:23) at Promise._settlePromiseFromHandler (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:512:31) at Promise._settlePromise (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:569:18) at Promise._settlePromise0 (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:614:10) at Promise._settlePromises (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:694:18) at Promise._fulfill (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:638:18) at Promise._resolveCallback (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:432:57) at Promise._settlePromiseFromHandler (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:524:17) at Promise._settlePromise (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:569:18) at Promise._settlePromise0 (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:614:10) at Promise._settlePromises (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:694:18) at Promise._fulfill (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:638:18) at Promise._resolveCallback (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:432:57) at Promise._settlePromiseFromHandler (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:524:17) at Promise._settlePromise (/Users/lukas/Sites/laravel-mix/node_modules/bluebird/js/release/promise.js:569:18) npm ERR! code ELIFECYCLE npm ERR! errno 1 npm ERR! @ production: `cross-env 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! /Users/lukas/.npm/_logs/2019-01-30T09_42_28_190Z-debug.log error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

About this issue

Original URL
State: closed
Created 5 years ago
Reactions: 3
Comments: 16 (1 by maintainers)

Most upvoted comments

I ran into the same issue with ChartJS as a dynamic component, which apparently loads moment under the hood.

The fix was to tell ChartJS to avoid loading moment:

mix.webpackConfig({
    // Tells ChartJS to ignore loading momentjs
    externals: {
        moment: 'moment'
    }
});

danielbachhuber on Jul 21, 2020

const mix = require('laravel-mix');
const MomentLocalesPlugin = require('moment-locales-webpack-plugin');
 
mix.js('resources/js/app.js', 'public/js')
    .webpackConfig({
        plugins: [
            // To strip all locales except “en”
            new MomentLocalesPlugin(),
        ]
    })
mix.version();

rhonalchirinos on Apr 2, 2020

Instead of doing import moment from 'moment'; I did this window.moment = require('moment'); in my app.js file

oroalej on Feb 22, 2020

I had the same issue with chunked compnents (dynamic import). I found the error is with the page which importing moment, I removed moment from my application and now its working fine with latest webpack and laravel mix.

So I suggest if anyone using moment npm package, remove it and add alternative one

anishbangalore on Jul 12, 2019

I love moment, I would not remove it, another solution ???

https://momentjs.com/docs/#/use-it/webpack/

rhonalchirinos on Nov 6, 2019

Any news on this? i’m using a library that uses moment.js and I really need it.

Edit: I ended up doing:

mix.webpackConfig({
    // Tells ChartJS to ignore loading momentjs
    externals: {
        moment: 'moment'
    }
});

And importing moment.js with a CDN on the page I needed it (I only needed it on one page)

alitnk on Sep 3, 2020

Thank you @anishbangalore you save me a lot of time.

gieroj on Jul 27, 2019