Vue.js lazy loading

Question

I'm using Laravel mix for compiling my vue.js components. Now I would like to lazy load my components found it here:

https://v2.vuejs.org/v2/guide/components.html#Async-Components

When I try this:

Vue.component('setting', () => import('./components/settings/setting.vue'));

I get:

 error  in ./resources/assets/admin/vue/core.js

Syntax Error: Unexpected token (36:31)

  34 |  */
  35 |
> 36 | Vue.component('setting', () => import('./components/settings/setting.vue'));
     |                                ^

What could be wrong here? When I register the component 'normal' everything is working?

Answer 1

Following from the comments. You need to specify the publicPath. Here's a small version of a working webpack.mix.js file tested on laravel 5.5 with laravel-mix

const { mix } = require('laravel-mix');
mix.setPublicPath('public/');



mix.webpackConfig({
    output: {
      chunkFilename: 'js/[name].[chunkhash].js',
         publicPath: '/'
     },
    module: {
        rules: [{
            test: /\.js?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',
            options: {
              presets: ['babel-preset-env'],
              plugins:['babel-plugin-dynamic-import-webpack']
            }
        },

  ]
    }
});


mix.js('resources/assets/js/app.js', 'public/js')
.sass('resources/assets/sass/app.scss', 'public/css')
.version();

You probably had your manifest.json producing wrong paths and thus the webpack is not being able to find the correct chunk file paths. So your solution is either to modifiy the paths or just stick with default paths as the example above. The code above should produce app.js inside public/js and as well the chunked files. Also it will produce the manifest.json in public directory Now finally just reference your app.js file in your blade

<script src="{{mix('/js/app.js')}}"></script>

Note that you need to have babel loader and babel dynamic import plugins installed the first is needed to be able to use babel plugins in webpack as i'm not sure if laravel mix reads the .babelrc file and if it does then that should be enough