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

Question

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?

could you put scss files before js files in webpack?

Saeed
– Saeed

2019-08-12 09:31:13 +00:00
Commented Aug 12, 2019 at 9:31 — Saeed
– Saeed, Commented Aug 12, 2019 at 9:31

Salim Djerbouh · Accepted Answer · 2019-08-13 10:38:18Z

4

+50

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

answered Aug 13, 2019 at 10:38

Salim Djerbouh

11.1k6 gold badges35 silver badges65 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

liga · Accepted Answer · 2019-12-10 09:13:51Z

1

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.

edited Dec 10, 2019 at 9:13

answered Dec 10, 2019 at 8:53

liga

1078 bronze badges

Comments

Aslam H · Accepted Answer · 2020-10-13 18:30:02Z

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:

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related