Laravel-mix: Still having CSS compiling issues on dynamic imports (0kb app.css file).

[skeeith]

• Laravel Version: 6.12.0
• Laravel Mix Version: 5.0.1
• Node Version: 12.14.1
• NPM Version: 6.13.6
• OS: Windows 10

Description:

Can confirm this issue still exists in Laravel Mix v5 since Mix v4

Does anyone know a workaround on this? I don't wanna stay on Laravel Mix v2 or v3 forever lol

Packages

• "axios": "^0.19",
• "babel-plugin-syntax-dynamic-import": "^6.18.0",
• "bootstrap": "^4.4.1",
• "cross-env": "^6.0",
• "jquery": "^3.2",
• "laravel-mix": "^5.0.1",
• "lodash": "^4.17.13",
• "popper.js": "^1.12",
• "resolve-url-loader": "^2.3.1",
• "sass": "^1.20.1",
• "sass-loader": "7.*",
• "vue": "^2.5.17",
• "vue-router": "^3.0.6",
• "vue-template-compiler": "^2.6.10",
• "vuex": "^3.1.1"

Output

          Asset      Size                             Chunks             Chunk Names
   /css/app.css   0 bytes  /js/app, /js/manifest, /js/vendor  [emitted]  /js/app, /js/manifest, /js/vendor
     /js/app.js  3.33 MiB                            /js/app  [emitted]  /js/app
/js/manifest.js  8.94 KiB                       /js/manifest  [emitted]  /js/manifest
  /js/vendor.js   885 KiB                         /js/vendor  [emitted]  /js/vendor
           0.js  8.96 KiB                                  0  [emitted]

Steps To Reproduce:

install babel-plugin-syntax-dynamic-import

setup .babelrc

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

setup webpack.mix.js

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

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .sourceMaps()
    .extract([
        'vue'
    ]);

if (mix.inProduction()) {
    mix.version();
}

mix.disableNotifications();

Dynamically importing Vue components on Vue Router

router.js

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const Overview = () => import('./views/Overview');

export default new Router({
    mode: 'history',
    routes: [
        { path: '/', name: 'overview', component: Overview }
    ]
});

lastly run npm run dev/watch

[skeeith]

any updates on this one?

[roitto]

The workaround is to use different build files for styles and scripts. The other workaround is to wait for the webpack 5 version. (Laravel mix 5 does not use webpack 5)

[ice6]

I have been waiting for so loooooooooog, thanks for the authors anyway :)

[TiBianMod]

I have the same issue..
The problem is coming from the mix.extract(); method.
if i don't use the extract method, then everything works again !!!

[vergil-lai]

I have the same issue..

[skeeith]

@TibianMod @vergil-lai

The work around is go back to to v2 or v3.

"axios": "^0.19",
"babel-plugin-syntax-dynamic-import": "^6.18.0",
"bootstrap": "^4.4.1",
"chart.js": "^2.9.3",
"cross-env": "^7.0",
"jquery": "^3.4.1",
"laravel-echo": "^1.6.1",
"laravel-mix": "^2.0",
"lodash": "^4.17.13",
"moment": "^2.24.0",
"popper.js": "^1.12",
"socket.io": "^2.3.0",
"socket.io-client": "^2.3.0",
"vue": "^2.6.10",
"vue-template-compiler": "^2.6.10",
"vue-router": "^3.1.5",
"vue-select": "^3.4.0",
"vuejs-datepicker": "^1.6.2",
"vuelidate": "^0.7.5",
"vuex": "^3.1.2"

[vergil-lai]

@JeffreyWay

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

[arkid]

A possible cause of this is that your assets are located at a file paths with spaces in one or more of the directory names.