Laravel-mix: CssSyntaxError: Unknown word

[elliotlings]

• Laravel Mix Version: 4.0.15
• Node Version: 10.0.0
• NPM Version: 6.5.0
• OS: MacOS 10.14.1

Description:

When I run npm run dev I get no issues. But as soon as I run npm run production I get an error that says CssSyntaxError: /css/app.css:777:3: Unknown word.

I've looked through all my CSS and I can't see anything that is out of place. I'm struggling to figure out where I am going wrong.

Steps To Reproduce:

My mix is

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

I am using scss mainly for the @import functionality so I can have modular files.

However, deleting all the CSS still produces errors.

I have noticed at the bottom of the app.css file, produced in dev and maybe the same in production it appends the following:

```public/css/app.css
var map = {
"./Input.vue": [
"./resources/js/app/components/fields/Input.vue",
3
],
"./Select.vue": [
"./resources/js/app/components/fields/Select.vue",
4
]
};
function webpackAsyncContext(req) {
if(!__webpack_require__.o(map, req)) {
return Promise.resolve().then(function() {
var e = new Error("Cannot find module '" + req + "'");
e.code = 'MODULE_NOT_FOUND';
throw e;
});
}

var ids = map[req], id = ids[0];
return __webpack_require__.e(ids[1]).then(function() {
    return __webpack_require__(id);
});

}
webpackAsyncContext.keys = function webpackAsyncContextKeys() {
return Object.keys(map);
};
webpackAsyncContext.id = "./resources/js/app/components/fields lazy recursive ^\.\/.\.vue$";
module.exports = webpackAsyncContext;
/# sourceMappingURL=app.css.map*/
```

[elliotlings]

I can confirm it appears to be appending JavaScript at the bottom of the CSS. That seems to be what it's erroring on when it says Unknown word.

[elliotlings]

It appears to be an issue within Vue using dynamic async components:

field.component = () => import('../../components/fields/' + field.type);

Removing this stops it throwing an error. However, I need this :/

[jameslkingsley]

Getting the same issue. Are there any plans to support async components?

[moshanghan]

The same issue

[JeffreyWay]

Dynamic imports aren't supported in Mix 4. We can't solve that until webpack 5 is out, which hopefully is soon.

[StefanNeuser]

Hi @elliotlings and @JeffreyWay , is that a fake news: https://laravel-news.com/using-dynamic-imports-with-laravel-mix ?

[Roywcm]

Oh man, I spend more than a day to find out this issue... Did you guy's found a work around? I also need this...

[ThaDaVos]

It seems that, that article is wrong, even with the babel plugin loaded, it will still fail... sadly I really need the dynamic import... any workaround known?

[DengSihan]

I am using chartjs in my vue componment, once I import chartjs, the error occured. If I remove chartjs, the error gone.

[ThaDaVos]

@DengSihan
I am sorry if I am wrong, but if I remember correctly this is all caused by MomentJs being included in the wrong way - I think I fixed it by adding this line as high up as possible in the app.js:

window.moment = require('moment');

(I added it right after the Vue import)

[DengSihan]

@DengSihan
I am sorry if I am wrong, but if I remember correctly this is all caused by MomentJs being included in the wrong way - I think I fixed it by adding this line as high up as possible in the app.js:

window.moment = require('moment');

(I added it right after the Vue import)

Thanks for your patient reply, but I didn't use moment in my project.
Before I import charts.js, everything goes fine. The error only happened when running npm run prod

[ThaDaVos]

ChartJs includes MomentJS - If I recall correctly