Vue Lazy Loading Not Working

Question

My webpack bundle ended up being large after adding a couple of Vue components to my project, so I am trying to use the lazy loading based off this tutorial:

https://vuejsdevelopers.com/2017/07/03/vue-js-code-splitting-webpack/

However, I keep getting the following error:

[Vue warn]: Failed to resolve async component: function(){return n.e(0).then(n.bind(null,155)).then(function(t){return t.default})}
Reason: Error: Loading chunk 0 failed.

Here is my webpack.config.js

  /**
 * Webpack configuration for development
 */
const path = require('path');
var webpack = require('webpack');
var nodeExternals = require('webpack-node-externals');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const { VueLoaderPlugin } = require('vue-loader');
var inProduction = (process.env.NODE_ENV === 'production');
require("babel-polyfill");

module.exports = {
  devtool: 'source-map',
  entry: ["babel-polyfill", path.join(process.cwd(), 'src/index')],
  output: {
    filename: 'bundle.js',
    path: path.join(process.cwd(), 'public', 'assets'),
    publicPath: 'js/',
    chunkFilename: 'chunks/[name].js',
  },
  resolve: {
    alias: {
      vue: 'vue/dist/vue.js'
    }
  },
  plugins: [
    new webpack.DefinePlugin({
      'process.env': {
        'NODE_ENV': JSON.stringify('production')
      }
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css"
    }),
    new VueLoaderPlugin()
  ],
  module: {
    rules: [
      {
        test: /\.vue$/,
        loader: 'vue-loader'
      },
      {
        test: /\.js?$/,
        use: [
        {
          loader: "babel-loader",
          options: {
            "presets": [["es2015", {"modules": false}]]
          }
        }
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"]
      }
    ],
  },
  target: 'web',
  //externals: [nodeExternals()],
};

Here is the index.js file that initializes Vue:

import Vue from 'vue';

Vue.component('latest-articles', () => import('./javascripts/components/LatestArticles.vue').then(m => m.default));

const app = new Vue({
    el: '#app',
    components: {
        'latest-articles': () => import('./javascripts/components/LatestArticles.vue').then(m => m.default)
    }
});

I am wondering what I am missing. Any help would be appreciated!

胡亚雄 · Accepted Answer · 2018-08-11 01:46:42Z

1

I am not sure about your webpack & vue.js version. Try to edit your code in your index.js like below and see if there is any errors from the console.

import Vue from 'vue';
const LatestArticles = () =>import('./javascripts/components/LatestArticles.vue');

const app = new Vue({
    el: '#app',
    components: {
        'latest-articles': LatestArticles
    }
});

answered Aug 11, 2018 at 1:46

胡亚雄

2,1891 gold badge21 silver badges21 bronze badges

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

1 Comment

Orion Over a year ago

I keep getting " [Vue warn]: Failed to resolve async component: function(){return Promise.all([n.e(0),n.e(1)]).then(n.bind(null,347))} Reason: Error: Loading chunk 0 failed."

Collectives™ on Stack Overflow

Vue Lazy Loading Not Working

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related