CODEWITHSUNDEEP
laravellaravel-5webpacksasslaravel-mix
VerySeriousSoftwareEndeavours
VerySeriousSoftwareEndeavours

Reputation: 1753

Webpack generating empty CSS files in Laravel app when using Vue-Router

I have a Laravel application that uses webpack to compile some SASS assets. 

mix.js('resources/js/vue/User/dashboard.js', 'public/js/User')

.js('resources/js/vue/home.js', 'public/js')
.js('resources/js/vue/admin-dashboard.js', 'public/js/admin')

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

Inside one of the JS files it compiles, is a Vue-Router instance that creates webpack chunks:

const router = new VueRouter({
    mode: "history",
    routes: [
        {
            path: "/admin",
            component: () => import("./admin/Dashboard.vue" /* webpackChunkName: "js/admin/components/dashboard" */ )
        }
    ],
    scrollBehavior (to, from, savedPosition) {
        return savedPosition || { x: 0, y: 0 };
    }
});

The above code breaks the compiling of my CSS assets. When I run npm run dev, the output says that the CSS files are generated properly.

 DONE  Compiled successfully in 3177ms                                                                                                                                                                   3:16:42 PM

           Asset      Size  Chunks             Chunk Names
    /css/app.css   196 KiB     mix  [emitted]  mix
/css/layouts.css  9.91 KiB     mix  [emitted]  mix

However when I check the .css files, both of them are empty. If I comment out the Vue-Router portion, the CSS files generate correctly.

Why does including the Vue-Router webpack chunks break the compiling of the CSS assets?

Upvotes: 4

Views: 3609

Answers (3)

Aslam H
Aslam H

Reputation: 1801

UPDATE OCTOBER 2020

as JeffreyWay desribe here https://github.com/JeffreyWay/laravel-mix/issues/1914#issuecomment-706608848

This was a known issue with Mix and webpack 4. We tried for a long time to resolve it, but every option ended up breaking a different part of the Mix API.

The problem is solved in Mix v6 which now uses webpack 5.

Tested laravel mix version v6.0.0-beta.10 extract() and dynamic import.

routes.js

function view(path) {
  return () =>
    import(
      /* webpackPrefetch: true */
      `@/views/${path}`
    ).then(module => module.default || module);
}

export default [
  {
    path: "/login",
    name: "login",
    component: view("auth/login.vue")
  },
]

webpack.mix.js

mix.extract();

Result:

enter image description here

Upvotes: 0

liga
liga

Reputation: 107

I just replaced the way I call the components.

From: 

component: () => import('Login')

To:

component: require('Login').default

And everything works fine, I'm not really sure if it's the same thing. Maybe someone can elaborate a little bit over my solution.

Upvotes: 1

Salim Djerbouh
Salim Djerbouh

Reputation: 11034

This appears to be a problem with Laravel Mix as described in the notes section of this release and how it deals with dynamic imports

Notes

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

This will be fixed when webpack 5 is released so the current workaround is to downgrade Laravel mix to version ^3.0

Upvotes: 4

Related Questions