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

[lukasleitsch]

• 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:

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

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

1. Run yarn

2. 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

3. Add import moment from 'moment'; in the script tags of resources/js/components/ExampleComponent.vue
4. 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. (/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), :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.

 

[ankurk91]

Can you share your webpack.mix.js code.

[lukasleitsch]

Default file from Laravel:

const mix = require('laravel-mix');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css');

[roitto]

https://github.com/JeffreyWay/laravel-mix/releases/tag/v4.0.0

If your project heavily uses JavaScript dynamic imports, you may need to hold off until the release of webpack 5 early next year. There are known compile issues related to this that we cannot fix until then. Once webpack 5 is out, Mix will be updated shortly after. If you're unfamiliar with dynamic imports, then this very likely won't affect your project.

[lukasleitsch]

In my example is only one dynamic import. I would define one dynamic import as not heavily.

Without the import of moment.js everything works fine. But I would like to use this library.

[roitto]

I got similar error when i tried to dynamically import/require just one component into my script. If i remember right the component i tried had some imports inside it. Somehow the laravel mix put javascript inside my css files and the css packer threw same error as you got.

[lukasleitsch]

My solution for this issue: Say good bye to moment.js and switching to date-fns.

I can import date-fns in a dynamic component without any issues. But I think that my solution don't solve the reasons of this issue.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[anishbangalore]

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

[gieroj]

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

[rhonalchirinos]

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

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

[oroalej]

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

[DengSihan]

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

still error 😥

At last , I use dayjs instead of momentjs, and it works perfectly.

[rhonalchirinos]

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();

[Smmw]

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

You saved my day

[danielbachhuber]

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'
    }
});

[alitnk]

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)