Lazy Loading Components not working with Vue Router

Question

When trying to lazy load components in my routes.js file, my CSS is not compiled.

When using an import statement at the top of the file, everything works as expected. There are no console errors or compile errors. I'm using Vue.js, Vue-Router, Laravel, and Laravel-Mix (all latest versions)

//Working (CSS is present)
import Home from '../../components/admin/Home';

//Not Working (No CSS is present)
function loadView(view) {
    return () => import(/* webpackChunkName: "view-[request]" */ `../../components/admin/${view}.vue`)
}

//How I'm initializing the component
let routes = [
    { 
        path: '/', 
        name: 'home',
        component: loadView('Home'),
        meta: { 
            requiresAuth: true
        }
    }]

//Laravel Mix Config
const mix = require('laravel-mix');
const webpack = require('webpack');

mix.js('resources/js/apps/registration/app.js', 'public/js/apps/registration/app.js')
   .js('resources/js/apps/admin/app.js', 'public/js/apps/admin/app.js')
   .js('resources/js/material-dashboard.js', 'public/js/material-dashboard.js')
   .js('resources/js/material-dashboard-extras.js', 'public/js/material-dashboard-extras.js')
   .sass('resources/sass/app.scss', 'public/css');

 mix.webpackConfig({
   plugins: [
      /**
       * Bug with moment.js library causing ./locale not to be found
       * https://github.com/moment/moment/issues/2979
       * Created an empty module running npm install --save empty-module and then doing the below
       */
      new webpack.ContextReplacementPlugin(/\.\/locale$/, 'empty-module', false, /js$/),
      /**
       * Global objects are not getting recognized via require
       * Set them up here
       * global_name: path or module
       */
      new webpack.ProvidePlugin({
         /**
          * There was an error with Popper not being defined due to Popper being included in Bootstrap
          * https://github.com/FezVrasta/bootstrap-material-design/issues/1296
          */
         'Popper': 'popper.js/dist/umd/popper'
     })
  ]
 });

Attached are screenshots of what I mean by CSS not being applied

How page looks with import

How page looks when trying to lazy load components in routes.js

Not sure if it's possible to dynamically import a variable component file name (compile time operation). Did you try with static filenames (no variable part in file path)? () => import(/* webpackChunkName: "view-1" */ "../../components/admin/view1.vue") — ssc-hrep3

Ewomazino Ukah Ewomazino Ukah · Accepted Answer · 2019-05-12T22:00:33

You are not supposed to import the webpack chunk name, instead just reference the approriate path to the component like so:

//Not Working (No CSS is present)
function loadView(view) {
    return () => import(  `../../components/admin/${view}.vue`)
}

NB: not tested, hope it helps :)

Lazy Loading Components not working with Vue Router

1 Answers