Laravel-mix: Laravel Mix is inserting javascript code inside the css file

[eduardodallmann]

• Laravel Mix Version: 4.0.7
• Node Version: v11.9.0
• NPM Version: 6.8.0-next.0
• OS: windows 10 17134.523

Description:

Laravel Mix is inserting javascript code inside the css file.

package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
        "watch": "npm run development -- --watch",
        "watch-poll": "npm run watch -- --watch-poll",
        "hot": "cross-env 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": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js"
    },
    "devDependencies": {
        "@babel/plugin-syntax-dynamic-import": "^7.2.0",
        "@websanova/vue-auth": "^2.21.14-beta",
        "axios": "^0.18",
        "bootstrap": "3.3.7",
        "browser-sync": "^2.26.3",
        "browser-sync-webpack-plugin": "^2.2.2",
        "cross-env": "^5.1",
        "expose-loader": "^0.7.5",
        "gentelella": "^1.4.0",
        "jquery": "^3.3.1",
        "laravel-mix": "^4.0.7",
        "lodash": "^4.17.5",
        "moment": "^2.24.0",
        "node-sass": "^4.11.0",
        "nprogress": "^0.2.0",
        "popper.js": "^1.14.7",
        "resolve-url-loader": "^3.0.0",
        "sass": "^1.17.0",
        "sass-loader": "^7.1.0",
        "v-money": "^0.8.1",
        "vee-validate": "^2.1.7",
        "velocity-animate": "^1.5.2",
        "vue": "^2.6.2",
        "vue-axios": "^2.1.4",
        "vue-loader": "^15.6.2",
        "vue-notification": "^1.3.15",
        "vue-router": "^3.0.2",
        "vue-stars": "^1.1.3",
        "vue-style-loader": "^4.1.2",
        "vue-sweetalert2": "^1.6.4",
        "vue-template-compiler": "^2.6.2",
        "vue-the-mask": "^0.11.1"
    }
}

webpack.mix.js

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


//landingpage
mix.js('resources/js/home.js', 'public/js');

mix.copy('resources/css/geral.css', 'public/css/geral.css')
   .copy('resources/css/style.css', 'public/css/style.css')
   .copy('node_modules/jquery/dist/jquery.min.js', 'public/js/jquery.min.js')
   .copy('node_modules/bootstrap/dist/css/bootstrap.min.css', 'public/css/bootstrap.min.css')
   .copy('node_modules/bootstrap/dist/js/bootstrap.min.js', 'public/js/bootstrap.min.js')
   .copy('node_modules/gentelella/vendors/font-awesome/css/font-awesome.min.css', 'public/css/font-awesome.min.css');

//app
mix.js('resources/js/app.js', 'public/js')
   .sass('resources/sass/app.scss', 'public/css', { implementation: require('node-sass') });

mix.copy('resources/js/custom-gentelella.js', 'public/js/gentelella.js')
   .copy('node_modules/gentelella/src/js/helpers/smartresize.js', 'public/js/smartresize.js')
   .copy('node_modules/gentelella/vendors/animate.css/animate.min.css', 'public/css/animate.min.css')
   .copy('node_modules/gentelella/vendors/nprogress/nprogress.css', 'public/css/nprogress.css')
   .copy('node_modules/gentelella/build/css/custom.min.css', 'public/css/custom.min.css');

mix.webpackConfig({
   optimization: {
      splitChunks: false,
   },
   resolve: {
      extensions: ['.js', '.vue', '.json'],
      alias: {
         'vue$': 'vue/dist/vue.esm.js',
         '@': __dirname + '/resources/js'
      },
   },
});
mix.autoload({
   'jquery': ['$', 'window.jQuery', 'jQuery'],

});

mix.browserSync({
   proxy: process.env.MIX_SENTRY_DSN_PUBLIC,
   watchOptions: {
      ignored: ['**/*.php']
   },
});
mix.disableNotifications();

app.scss

@import 'variables';

.swal2-popup {
    font-size: 1.6rem !important;
  }

And here's the problem, the css output I'm getting. I'm using npm run watch
app.css

var map = {
    "./af": "./node_modules/moment/locale/af.js",
    "./af.js": "./node_modules/moment/locale/af.js",
    "./ar": "./node_modules/moment/locale/ar.js",
    "./ar-dz": "./node_modules/moment/locale/ar-dz.js",
    "./ar-dz.js": "./node_modules/moment/locale/ar-dz.js",
    "./ar-kw": "./node_modules/moment/locale/ar-kw.js",
    "./ar-kw.js": "./node_modules/moment/locale/ar-kw.js",
    "./ar-ly": "./node_modules/moment/locale/ar-ly.js",
    "./ar-ly.js": "./node_modules/moment/locale/ar-ly.js",
    "./ar-ma": "./node_modules/moment/locale/ar-ma.js",
    "./ar-ma.js": "./node_modules/moment/locale/ar-ma.js",
    "./ar-sa": "./node_modules/moment/locale/ar-sa.js",
    "./ar-sa.js": "./node_modules/moment/locale/ar-sa.js",
    "./ar-tn": "./node_modules/moment/locale/ar-tn.js",
    "./ar-tn.js": "./node_modules/moment/locale/ar-tn.js",
    "./ar.js": "./node_modules/moment/locale/ar.js",
    "./az": "./node_modules/moment/locale/az.js",
    "./az.js": "./node_modules/moment/locale/az.js",
    "./be": "./node_modules/moment/locale/be.js",
    "./be.js": "./node_modules/moment/locale/be.js",
    "./bg": "./node_modules/moment/locale/bg.js",
    "./bg.js": "./node_modules/moment/locale/bg.js",
    "./bm": "./node_modules/moment/locale/bm.js",
    "./bm.js": "./node_modules/moment/locale/bm.js",
    "./bn": "./node_modules/moment/locale/bn.js",
    "./bn.js": "./node_modules/moment/locale/bn.js",
    "./bo": "./node_modules/moment/locale/bo.js",
    "./bo.js": "./node_modules/moment/locale/bo.js",
    "./br": "./node_modules/moment/locale/br.js",
    "./br.js": "./node_modules/moment/locale/br.js",
    "./bs": "./node_modules/moment/locale/bs.js",
    "./bs.js": "./node_modules/moment/locale/bs.js",
    "./ca": "./node_modules/moment/locale/ca.js",
    "./ca.js": "./node_modules/moment/locale/ca.js",
    "./cs": "./node_modules/moment/locale/cs.js",
    "./cs.js": "./node_modules/moment/locale/cs.js",
    "./cv": "./node_modules/moment/locale/cv.js",
    "./cv.js": "./node_modules/moment/locale/cv.js",
    "./cy": "./node_modules/moment/locale/cy.js",
    "./cy.js": "./node_modules/moment/locale/cy.js",
    "./da": "./node_modules/moment/locale/da.js",
    "./da.js": "./node_modules/moment/locale/da.js",
    "./de": "./node_modules/moment/locale/de.js",
    "./de-at": "./node_modules/moment/locale/de-at.js",
    "./de-at.js": "./node_modules/moment/locale/de-at.js",
    "./de-ch": "./node_modules/moment/locale/de-ch.js",
    "./de-ch.js": "./node_modules/moment/locale/de-ch.js",
    "./de.js": "./node_modules/moment/locale/de.js",
    "./dv": "./node_modules/moment/locale/dv.js",
    "./dv.js": "./node_modules/moment/locale/dv.js",
    "./el": "./node_modules/moment/locale/el.js",
    "./el.js": "./node_modules/moment/locale/el.js",
    "./en-SG": "./node_modules/moment/locale/en-SG.js",
    "./en-SG.js": "./node_modules/moment/locale/en-SG.js",
    "./en-au": "./node_modules/moment/locale/en-au.js",
    "./en-au.js": "./node_modules/moment/locale/en-au.js",
    "./en-ca": "./node_modules/moment/locale/en-ca.js",
    "./en-ca.js": "./node_modules/moment/locale/en-ca.js",
    "./en-gb": "./node_modules/moment/locale/en-gb.js",
    "./en-gb.js": "./node_modules/moment/locale/en-gb.js",
    "./en-ie": "./node_modules/moment/locale/en-ie.js",
    "./en-ie.js": "./node_modules/moment/locale/en-ie.js",
    "./en-il": "./node_modules/moment/locale/en-il.js",
    "./en-il.js": "./node_modules/moment/locale/en-il.js",
    "./en-nz": "./node_modules/moment/locale/en-nz.js",
    "./en-nz.js": "./node_modules/moment/locale/en-nz.js",
    "./eo": "./node_modules/moment/locale/eo.js",
    "./eo.js": "./node_modules/moment/locale/eo.js",
    "./es": "./node_modules/moment/locale/es.js",
    "./es-do": "./node_modules/moment/locale/es-do.js",
    "./es-do.js": "./node_modules/moment/locale/es-do.js",
    "./es-us": "./node_modules/moment/locale/es-us.js",
    "./es-us.js": "./node_modules/moment/locale/es-us.js",
    "./es.js": "./node_modules/moment/locale/es.js",
    "./et": "./node_modules/moment/locale/et.js",
    "./et.js": "./node_modules/moment/locale/et.js",
    "./eu": "./node_modules/moment/locale/eu.js",
    "./eu.js": "./node_modules/moment/locale/eu.js",
    "./fa": "./node_modules/moment/locale/fa.js",
    "./fa.js": "./node_modules/moment/locale/fa.js",
    "./fi": "./node_modules/moment/locale/fi.js",
    "./fi.js": "./node_modules/moment/locale/fi.js",
    "./fo": "./node_modules/moment/locale/fo.js",
    "./fo.js": "./node_modules/moment/locale/fo.js",
    "./fr": "./node_modules/moment/locale/fr.js",
    "./fr-ca": "./node_modules/moment/locale/fr-ca.js",
    "./fr-ca.js": "./node_modules/moment/locale/fr-ca.js",
    "./fr-ch": "./node_modules/moment/locale/fr-ch.js",
    "./fr-ch.js": "./node_modules/moment/locale/fr-ch.js",
    "./fr.js": "./node_modules/moment/locale/fr.js",
    "./fy": "./node_modules/moment/locale/fy.js",
    "./fy.js": "./node_modules/moment/locale/fy.js",
    "./ga": "./node_modules/moment/locale/ga.js",
    "./ga.js": "./node_modules/moment/locale/ga.js",
    "./gd": "./node_modules/moment/locale/gd.js",
    "./gd.js": "./node_modules/moment/locale/gd.js",
    "./gl": "./node_modules/moment/locale/gl.js",
    "./gl.js": "./node_modules/moment/locale/gl.js",
    "./gom-latn": "./node_modules/moment/locale/gom-latn.js",
    "./gom-latn.js": "./node_modules/moment/locale/gom-latn.js",
    "./gu": "./node_modules/moment/locale/gu.js",
    "./gu.js": "./node_modules/moment/locale/gu.js",
    "./he": "./node_modules/moment/locale/he.js",
    "./he.js": "./node_modules/moment/locale/he.js",
    "./hi": "./node_modules/moment/locale/hi.js",
    "./hi.js": "./node_modules/moment/locale/hi.js",
    "./hr": "./node_modules/moment/locale/hr.js",
    "./hr.js": "./node_modules/moment/locale/hr.js",
    "./hu": "./node_modules/moment/locale/hu.js",
    "./hu.js": "./node_modules/moment/locale/hu.js",
    "./hy-am": "./node_modules/moment/locale/hy-am.js",
    "./hy-am.js": "./node_modules/moment/locale/hy-am.js",
    "./id": "./node_modules/moment/locale/id.js",
    "./id.js": "./node_modules/moment/locale/id.js",
    "./is": "./node_modules/moment/locale/is.js",
    "./is.js": "./node_modules/moment/locale/is.js",
    "./it": "./node_modules/moment/locale/it.js",
    "./it-ch": "./node_modules/moment/locale/it-ch.js",
    "./it-ch.js": "./node_modules/moment/locale/it-ch.js",
    "./it.js": "./node_modules/moment/locale/it.js",
    "./ja": "./node_modules/moment/locale/ja.js",
    "./ja.js": "./node_modules/moment/locale/ja.js",
    "./jv": "./node_modules/moment/locale/jv.js",
    "./jv.js": "./node_modules/moment/locale/jv.js",
    "./ka": "./node_modules/moment/locale/ka.js",
    "./ka.js": "./node_modules/moment/locale/ka.js",
    "./kk": "./node_modules/moment/locale/kk.js",
    "./kk.js": "./node_modules/moment/locale/kk.js",
    "./km": "./node_modules/moment/locale/km.js",
    "./km.js": "./node_modules/moment/locale/km.js",
    "./kn": "./node_modules/moment/locale/kn.js",
    "./kn.js": "./node_modules/moment/locale/kn.js",
    "./ko": "./node_modules/moment/locale/ko.js",
    "./ko.js": "./node_modules/moment/locale/ko.js",
    "./ku": "./node_modules/moment/locale/ku.js",
    "./ku.js": "./node_modules/moment/locale/ku.js",
    "./ky": "./node_modules/moment/locale/ky.js",
    "./ky.js": "./node_modules/moment/locale/ky.js",
    "./lb": "./node_modules/moment/locale/lb.js",
    "./lb.js": "./node_modules/moment/locale/lb.js",
    "./lo": "./node_modules/moment/locale/lo.js",
    "./lo.js": "./node_modules/moment/locale/lo.js",
    "./lt": "./node_modules/moment/locale/lt.js",
    "./lt.js": "./node_modules/moment/locale/lt.js",
    "./lv": "./node_modules/moment/locale/lv.js",
    "./lv.js": "./node_modules/moment/locale/lv.js",
    "./me": "./node_modules/moment/locale/me.js",
    "./me.js": "./node_modules/moment/locale/me.js",
    "./mi": "./node_modules/moment/locale/mi.js",
    "./mi.js": "./node_modules/moment/locale/mi.js",
    "./mk": "./node_modules/moment/locale/mk.js",
    "./mk.js": "./node_modules/moment/locale/mk.js",
    "./ml": "./node_modules/moment/locale/ml.js",
    "./ml.js": "./node_modules/moment/locale/ml.js",
    "./mn": "./node_modules/moment/locale/mn.js",
    "./mn.js": "./node_modules/moment/locale/mn.js",
    "./mr": "./node_modules/moment/locale/mr.js",
    "./mr.js": "./node_modules/moment/locale/mr.js",
    "./ms": "./node_modules/moment/locale/ms.js",
    "./ms-my": "./node_modules/moment/locale/ms-my.js",
    "./ms-my.js": "./node_modules/moment/locale/ms-my.js",
    "./ms.js": "./node_modules/moment/locale/ms.js",
    "./mt": "./node_modules/moment/locale/mt.js",
    "./mt.js": "./node_modules/moment/locale/mt.js",
    "./my": "./node_modules/moment/locale/my.js",
    "./my.js": "./node_modules/moment/locale/my.js",
    "./nb": "./node_modules/moment/locale/nb.js",
    "./nb.js": "./node_modules/moment/locale/nb.js",
    "./ne": "./node_modules/moment/locale/ne.js",
    "./ne.js": "./node_modules/moment/locale/ne.js",
    "./nl": "./node_modules/moment/locale/nl.js",
    "./nl-be": "./node_modules/moment/locale/nl-be.js",
    "./nl-be.js": "./node_modules/moment/locale/nl-be.js",
    "./nl.js": "./node_modules/moment/locale/nl.js",
    "./nn": "./node_modules/moment/locale/nn.js",
    "./nn.js": "./node_modules/moment/locale/nn.js",
    "./pa-in": "./node_modules/moment/locale/pa-in.js",
    "./pa-in.js": "./node_modules/moment/locale/pa-in.js",
    "./pl": "./node_modules/moment/locale/pl.js",
    "./pl.js": "./node_modules/moment/locale/pl.js",
    "./pt": "./node_modules/moment/locale/pt.js",
    "./pt-br": "./node_modules/moment/locale/pt-br.js",
    "./pt-br.js": "./node_modules/moment/locale/pt-br.js",
    "./pt.js": "./node_modules/moment/locale/pt.js",
    "./ro": "./node_modules/moment/locale/ro.js",
    "./ro.js": "./node_modules/moment/locale/ro.js",
    "./ru": "./node_modules/moment/locale/ru.js",
    "./ru.js": "./node_modules/moment/locale/ru.js",
    "./sd": "./node_modules/moment/locale/sd.js",
    "./sd.js": "./node_modules/moment/locale/sd.js",
    "./se": "./node_modules/moment/locale/se.js",
    "./se.js": "./node_modules/moment/locale/se.js",
    "./si": "./node_modules/moment/locale/si.js",
    "./si.js": "./node_modules/moment/locale/si.js",
    "./sk": "./node_modules/moment/locale/sk.js",
    "./sk.js": "./node_modules/moment/locale/sk.js",
    "./sl": "./node_modules/moment/locale/sl.js",
    "./sl.js": "./node_modules/moment/locale/sl.js",
    "./sq": "./node_modules/moment/locale/sq.js",
    "./sq.js": "./node_modules/moment/locale/sq.js",
    "./sr": "./node_modules/moment/locale/sr.js",
    "./sr-cyrl": "./node_modules/moment/locale/sr-cyrl.js",
    "./sr-cyrl.js": "./node_modules/moment/locale/sr-cyrl.js",
    "./sr.js": "./node_modules/moment/locale/sr.js",
    "./ss": "./node_modules/moment/locale/ss.js",
    "./ss.js": "./node_modules/moment/locale/ss.js",
    "./sv": "./node_modules/moment/locale/sv.js",
    "./sv.js": "./node_modules/moment/locale/sv.js",
    "./sw": "./node_modules/moment/locale/sw.js",
    "./sw.js": "./node_modules/moment/locale/sw.js",
    "./ta": "./node_modules/moment/locale/ta.js",
    "./ta.js": "./node_modules/moment/locale/ta.js",
    "./te": "./node_modules/moment/locale/te.js",
    "./te.js": "./node_modules/moment/locale/te.js",
    "./tet": "./node_modules/moment/locale/tet.js",
    "./tet.js": "./node_modules/moment/locale/tet.js",
    "./tg": "./node_modules/moment/locale/tg.js",
    "./tg.js": "./node_modules/moment/locale/tg.js",
    "./th": "./node_modules/moment/locale/th.js",
    "./th.js": "./node_modules/moment/locale/th.js",
    "./tl-ph": "./node_modules/moment/locale/tl-ph.js",
    "./tl-ph.js": "./node_modules/moment/locale/tl-ph.js",
    "./tlh": "./node_modules/moment/locale/tlh.js",
    "./tlh.js": "./node_modules/moment/locale/tlh.js",
    "./tr": "./node_modules/moment/locale/tr.js",
    "./tr.js": "./node_modules/moment/locale/tr.js",
    "./tzl": "./node_modules/moment/locale/tzl.js",
    "./tzl.js": "./node_modules/moment/locale/tzl.js",
    "./tzm": "./node_modules/moment/locale/tzm.js",
    "./tzm-latn": "./node_modules/moment/locale/tzm-latn.js",
    "./tzm-latn.js": "./node_modules/moment/locale/tzm-latn.js",
    "./tzm.js": "./node_modules/moment/locale/tzm.js",
    "./ug-cn": "./node_modules/moment/locale/ug-cn.js",
    "./ug-cn.js": "./node_modules/moment/locale/ug-cn.js",
    "./uk": "./node_modules/moment/locale/uk.js",
    "./uk.js": "./node_modules/moment/locale/uk.js",
    "./ur": "./node_modules/moment/locale/ur.js",
    "./ur.js": "./node_modules/moment/locale/ur.js",
    "./uz": "./node_modules/moment/locale/uz.js",
    "./uz-latn": "./node_modules/moment/locale/uz-latn.js",
    "./uz-latn.js": "./node_modules/moment/locale/uz-latn.js",
    "./uz.js": "./node_modules/moment/locale/uz.js",
    "./vi": "./node_modules/moment/locale/vi.js",
    "./vi.js": "./node_modules/moment/locale/vi.js",
    "./x-pseudo": "./node_modules/moment/locale/x-pseudo.js",
    "./x-pseudo.js": "./node_modules/moment/locale/x-pseudo.js",
    "./yo": "./node_modules/moment/locale/yo.js",
    "./yo.js": "./node_modules/moment/locale/yo.js",
    "./zh-cn": "./node_modules/moment/locale/zh-cn.js",
    "./zh-cn.js": "./node_modules/moment/locale/zh-cn.js",
    "./zh-hk": "./node_modules/moment/locale/zh-hk.js",
    "./zh-hk.js": "./node_modules/moment/locale/zh-hk.js",
    "./zh-tw": "./node_modules/moment/locale/zh-tw.js",
    "./zh-tw.js": "./node_modules/moment/locale/zh-tw.js"
};


function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    var id = map[req];
    if(!(id + 1)) { // check for number or string
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return id;
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./node_modules/moment/locale sync recursive ^\\.\\/.*$";

[roitto]

Are you using dynamic imports? My project did the same thing when i used dynamic imports. It put some js in my css.

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.

[eduardodallmann]

Unfortunately I was using dynamic imports.

I tested, removed the imports and the problem was solved.

Thank you very much.

[stancl]

I'm getting code like this in my app.css:

function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    if(!__webpack_require__.o(map, req)) {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return map[req];
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "./resources/js sync recursive ^\\.\\/.*\\.vue$";

But it only happens on production builds.

[awebartisan]

@stancl how did you manage to solve it?

[stancl]

I didn't. Apparently I had to wait for Laravel Mix 5. It's out now, so it should work, but I haven't tested it yet.

[awebartisan]

I just upgraded to Laravel Mix 5, but its still not working... I think he mentioned to wait for Webpack 5?

[stancl]

Yeah. And Mix 5 was released after webpack 5.

[roitto]

No the laravel mix 5 does not still use webpack 5. I sont think that the laravel 5 even has that much new features. https://github.com/JeffreyWay/laravel-mix/blob/d432101c23198252e3952d8d89ee246d209265a8/package.json#L66

Webpack 5 is not yet stable enough. https://github.com/webpack/webpack/projects/5

[stancl]

Ah, right, webpack 5 is in beta https://github.com/webpack/webpack/releases/tag/v5.0.0-beta.0

[AndersonZacharyT]

Welp, guess I'll roll back to Laravel-Mix 3 or something that can actually build our project...

[AdanCruzHuerta]

Unfortunately I was using dynamic imports.

I tested, removed the imports and the problem was solved.

Thank you very much.

How is a dynamic import, do you have an example?

[pontaron52]

I had the same problem.
I erased all the images in the source code.
After removing the code below, it works properly.

:src="require(@/assets/${src || 'clint-mckoy.jpg'})"

If it would be helpful
Thank you

[dmitryuk]

Webpack and laravel-mix 5 is here but the problem still occurs.

[robindirksen1]

Had the same problem with Laravel 8 (Jetstream) in combination with Inertia.js (fresh install).

Problem occured when enabling lazy loading/code spliting (https://inertiajs.com/client-side-setup) of Inertia components: resolveComponent: name => import(`./Pages/${name}`).then(module => module.default),.

After upgrading to [email protected] it was fixed.

Generated app.css file (npm run production - before upgrading to laravel-mix v6):

// normal css output, for example: .xl\:w-0{width:0}.xl\:grid-cols-9{grid-template-columns:repeat(9,minmax(0,1fr))}.xl\:col-span-7{grid-column:span 7/span 7}.xl\:col-start-3{grid-column-start:3}}

var map = {
    "./af": "8GSH",
    "./af.js": "8GSH",
    "./ar": "NcOb",
    "./ar-dz": "1ors",
    "./ar-dz.js": "1ors",
    "./ar-kw": "Sc1Y",
    "./ar-kw.js": "Sc1Y",
    "./ar-ly": "GzvP",
    "./ar-ly.js": "GzvP",
    "./ar-ma": "hH25",
    "./ar-ma.js": "hH25",
    "./ar-sa": "u2jB",
    "./ar-sa.js": "u2jB",
    "./ar-tn": "5Mza",
    "./ar-tn.js": "5Mza",
    "./ar.js": "NcOb",
    "./az": "ZVVJ",
    "./az.js": "ZVVJ",
    "./be": "kQaN",
    "./be.js": "kQaN",
    "./bg": "+n5x",
    "./bg.js": "+n5x",
    "./bm": "TTiN",
    "./bm.js": "TTiN",
    "./bn": "aIF2",
    "./bn-bd": "lTqY",
    "./bn-bd.js": "lTqY",
    "./bn.js": "aIF2",
    "./bo": "QWb5",
    "./bo.js": "QWb5",
    "./br": "iQoZ",
    "./br.js": "iQoZ",
    "./bs": "EL7g",
    "./bs.js": "EL7g",
    "./ca": "vd/2",
    "./ca.js": "vd/2",
    "./cs": "K+3W",
    "./cs.js": "K+3W",
    "./cv": "Jt3X",
    "./cv.js": "Jt3X",
    "./cy": "sWi3",
    "./cy.js": "sWi3",
    "./da": "YcFX",
    "./da.js": "YcFX",
    "./de": "BKZ+",
    "./de-at": "Oq9h",
    "./de-at.js": "Oq9h",
    "./de-ch": "hHY4",
    "./de-ch.js": "hHY4",
    "./de.js": "BKZ+",
    "./dv": "w8Ej",
    "./dv.js": "w8Ej",
    "./el": "tSbB",
    "./el.js": "tSbB",
    "./en-au": "HgyJ",
    "./en-au.js": "HgyJ",
    "./en-ca": "ZyTy",
    "./en-ca.js": "ZyTy",
    "./en-gb": "exaB",
    "./en-gb.js": "exaB",
    "./en-ie": "yKzn",
    "./en-ie.js": "yKzn",
    "./en-il": "TB59",
    "./en-il.js": "TB59",
    "./en-in": "S70V",
    "./en-in.js": "S70V",
    "./en-nz": "iDxo",
    "./en-nz.js": "iDxo",
    "./en-sg": "zS0P",
    "./en-sg.js": "zS0P",
    "./eo": "4bvN",
    "./eo.js": "4bvN",
    "./es": "GNPT",
    "./es-do": "R7mU",
    "./es-do.js": "R7mU",
    "./es-mx": "FkqR",
    "./es-mx.js": "FkqR",
    "./es-us": "Nstw",
    "./es-us.js": "Nstw",
    "./es.js": "GNPT",
    "./et": "ZOjb",
    "./et.js": "ZOjb",
    "./eu": "kFC9",
    "./eu.js": "kFC9",
    "./fa": "8Cju",
    "./fa.js": "8Cju",
    "./fi": "vcN1",
    "./fi.js": "vcN1",
    "./fil": "3g1g",
    "./fil.js": "3g1g",
    "./fo": "8Ygf",
    "./fo.js": "8Ygf",
    "./fr": "Y8Ij",
    "./fr-ca": "t+Zl",
    "./fr-ca.js": "t+Zl",
    "./fr-ch": "SPXN",
    "./fr-ch.js": "SPXN",
    "./fr.js": "Y8Ij",
    "./fy": "T3MF",
    "./fy.js": "T3MF",
    "./ga": "NowM",
    "./ga.js": "NowM",
    "./gd": "GJYX",
    "./gd.js": "GJYX",
    "./gl": "MdC8",
    "./gl.js": "MdC8",
    "./gom-deva": "QJjq",
    "./gom-deva.js": "QJjq",
    "./gom-latn": "5j0y",
    "./gom-latn.js": "5j0y",
    "./gu": "fY0S",
    "./gu.js": "fY0S",
    "./he": "ACAV",
    "./he.js": "ACAV",
    "./hi": "3WqV",
    "./hi.js": "3WqV",
    "./hr": "OnNk",
    "./hr.js": "OnNk",
    "./hu": "EQmw",
    "./hu.js": "EQmw",
    "./hy-am": "MNf7",
    "./hy-am.js": "MNf7",
    "./id": "0yow",
    "./id.js": "0yow",
    "./is": "TmOJ",
    "./is.js": "TmOJ",
    "./it": "xD/0",
    "./it-ch": "foQf",
    "./it-ch.js": "foQf",
    "./it.js": "xD/0",
    "./ja": "jOnb",
    "./ja.js": "jOnb",
    "./jv": "lOtj",
    "./jv.js": "lOtj",
    "./ka": "BAN/",
    "./ka.js": "BAN/",
    "./kk": "iNiw",
    "./kk.js": "iNiw",
    "./km": "TUxt",
    "./km.js": "TUxt",
    "./kn": "hQzt",
    "./kn.js": "hQzt",
    "./ko": "ZNZT",
    "./ko.js": "ZNZT",
    "./ku": "S0Tg",
    "./ku.js": "S0Tg",
    "./ky": "JO+T",
    "./ky.js": "JO+T",
    "./lb": "vn/h",
    "./lb.js": "vn/h",
    "./lo": "gnIm",
    "./lo.js": "gnIm",
    "./lt": "6PD3",
    "./lt.js": "6PD3",
    "./lv": "YKe2",
    "./lv.js": "YKe2",
    "./me": "d3TR",
    "./me.js": "d3TR",
    "./mi": "hTlv",
    "./mi.js": "hTlv",
    "./mk": "ffVN",
    "./mk.js": "ffVN",
    "./ml": "ejL1",
    "./ml.js": "ejL1",
    "./mn": "RIsM",
    "./mn.js": "RIsM",
    "./mr": "CPJk",
    "./mr.js": "CPJk",
    "./ms": "d5Hy",
    "./ms-my": "t4T9",
    "./ms-my.js": "t4T9",
    "./ms.js": "d5Hy",
    "./mt": "1KVU",
    "./mt.js": "1KVU",
    "./my": "LsNb",
    "./my.js": "LsNb",
    "./nb": "h+U8",
    "./nb.js": "h+U8",
    "./ne": "2JSI",
    "./ne.js": "2JSI",
    "./nl": "jsZ8",
    "./nl-be": "+h6j",
    "./nl-be.js": "+h6j",
    "./nl.js": "jsZ8",
    "./nn": "mh29",
    "./nn.js": "mh29",
    "./oc-lnc": "zX+o",
    "./oc-lnc.js": "zX+o",
    "./pa-in": "O6bP",
    "./pa-in.js": "O6bP",
    "./pl": "8Bez",
    "./pl.js": "8Bez",
    "./pt": "DDip",
    "./pt-br": "uHm5",
    "./pt-br.js": "uHm5",
    "./pt.js": "DDip",
    "./ro": "baBi",
    "./ro.js": "baBi",
    "./ru": "ecsu",
    "./ru.js": "ecsu",
    "./sd": "e9KM",
    "./sd.js": "e9KM",
    "./se": "CZRU",
    "./se.js": "CZRU",
    "./si": "TO58",
    "./si.js": "TO58",
    "./sk": "K+Lk",
    "./sk.js": "K+Lk",
    "./sl": "QK6v",
    "./sl.js": "QK6v",
    "./sq": "v3Qg",
    "./sq.js": "v3Qg",
    "./sr": "Ndyf",
    "./sr-cyrl": "PGvg",
    "./sr-cyrl.js": "PGvg",
    "./sr.js": "Ndyf",
    "./ss": "2B8G",
    "./ss.js": "2B8G",
    "./sv": "WF5B",
    "./sv.js": "WF5B",
    "./sw": "4VvY",
    "./sw.js": "4VvY",
    "./ta": "dw3T",
    "./ta.js": "dw3T",
    "./te": "4MAb",
    "./te.js": "4MAb",
    "./tet": "/hi0",
    "./tet.js": "/hi0",
    "./tg": "PoVJ",
    "./tg.js": "PoVJ",
    "./th": "OY2w",
    "./th.js": "OY2w",
    "./tk": "zO4H",
    "./tk.js": "zO4H",
    "./tl-ph": "UC+K",
    "./tl-ph.js": "UC+K",
    "./tlh": "cWLW",
    "./tlh.js": "cWLW",
    "./tr": "EqYs",
    "./tr.js": "EqYs",
    "./tzl": "fN8o",
    "./tzl.js": "fN8o",
    "./tzm": "6cYq",
    "./tzm-latn": "pdAN",
    "./tzm-latn.js": "pdAN",
    "./tzm.js": "6cYq",
    "./ug-cn": "J+SV",
    "./ug-cn.js": "J+SV",
    "./uk": "6Olw",
    "./uk.js": "6Olw",
    "./ur": "QNGR",
    "./ur.js": "QNGR",
    "./uz": "hLzJ",
    "./uz-latn": "KqOT",
    "./uz-latn.js": "KqOT",
    "./uz.js": "hLzJ",
    "./vi": "EnIJ",
    "./vi.js": "EnIJ",
    "./x-pseudo": "W7dU",
    "./x-pseudo.js": "W7dU",
    "./yo": "QDhB",
    "./yo.js": "QDhB",
    "./zh-cn": "bjMe",
    "./zh-cn.js": "bjMe",
    "./zh-hk": "JFCg",
    "./zh-hk.js": "JFCg",
    "./zh-mo": "5BRa",
    "./zh-mo.js": "5BRa",
    "./zh-tw": "xBDH",
    "./zh-tw.js": "xBDH"
};


function webpackContext(req) {
    var id = webpackContextResolve(req);
    return __webpack_require__(id);
}
function webpackContextResolve(req) {
    if(!__webpack_require__.o(map, req)) {
        var e = new Error("Cannot find module '" + req + "'");
        e.code = 'MODULE_NOT_FOUND';
        throw e;
    }
    return map[req];
}
webpackContext.keys = function webpackContextKeys() {
    return Object.keys(map);
};
webpackContext.resolve = webpackContextResolve;
module.exports = webpackContext;
webpackContext.id = "MROq";

[pedrosancao]

Disclaimer: I'm not sure if was it that fixed the issue.

On package.json I have:

• "@babel/plugin-syntax-dynamic-import": "^7.8.3",
• "laravel-mix": "^4.0.14",

I had a .babelrc file on project enabling only the dynamic import plugin:

{
    "plugins": [
        "@babel/plugin-syntax-dynamic-import"
    ]
}

When I enable Vue lazy loading routes (with dynamic import) the CSS was generated with JS in it. I removed the .babelrc file, then the CSS file was correct.

Hope it helps anyone that gets here.