Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:9
Comments:9

Top GitHub Comments

2reactions

skeeithcommented, Feb 18, 2020

any updates on this one?

1reaction

TiBianModcommented, Apr 11, 2020

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 !!!

Top Results From Across the Web

Still having CSS compiling issues on dynamic imports (0kb ...

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

Solving the React Error: Not Picking Up CSS Style | Pluralsight

This error is generated because the compiler is only able to import files from the src folder. Here, the CSS file is saved...

Less CSS

Less extends CSS with dynamic behavior such as variables, mixins, operations and functions. Less runs on both the server-side (with Node.js and Rhino)...

Is 0kb of JavaScript in your Future? - DEV Community ‍ ‍

Yes you could use "includes" or "partials" in traditional server side frameworks, but you would still need to wire the javascript in separate ......

reactjs - Nextjs - Dynamic Imports - CSS Modules cannot be ...

Just wanted to post my answer. If you are going to use dynamic imports, then import paths themselves cannot be dynamic.