Hey, let's break down how to fix those Cannot read property 'call' of undefined errors you're seeing with Vue Router's async components after upgrading Webpack. These issues almost always boil down to dependency version mismatches or Webpack 4's changed behavior around chunk loading.

1. Update Dependencies to Match Webpack 4 Compatibility #

Webpack 4 introduced breaking changes that require matching versions of Vue-related tools. Here's what you need to update:

• vue-loader: You're using VueLoaderPlugin which requires vue-loader@15.x or higher (Webpack 4 doesn't work with older vue-loader versions).
• vue-template-compiler: Must be the exact same version as your vue package (this is a hard requirement for vue-loader to work).
• vue-router: Ensure you're on a version compatible with Vue 2 and Webpack 4 (v3.x is the right range for Vue 2).

Run this command (adjust versions to match your installed Vue version):

npm install vue-loader@^15.9.8 vue-template-compiler@^2.6.14 vue-router@^3.5.4 --save-dev

2. Add chunkFilename to Your Webpack Output #

Webpack 4 handles async chunk loading differently than Webpack 3, and without explicitly defining chunkFilename, it can generate chunk names that don't match your public path, leading to failed module resolution.

Update your output section in Webpack config:

output: {
    filename: '[name].js',
    chunkFilename: '[name].chunk.js', // Add this line
    path: `${__dirname}/public/assets/admin`,
    publicPath: '/assets/admin/',
},

This ensures async chunks (like your Vue Router components) get predictable filenames that Webpack can resolve correctly.

3. Ensure Babel Supports Dynamic Imports #

Vue Router's async component syntax (() => import(...)) requires Babel to understand dynamic imports. If you haven't already, add the necessary plugin:

Install the plugin:

npm install @babel/plugin-syntax-dynamic-import --save-dev

Then add it to your Babel config (.babelrc or babel.config.js):

{
  "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

This tells Babel to parse the dynamic import syntax without transpiling it (Webpack handles the actual chunk splitting).

4. Optional: Add Chunk Names to Async Imports #

For better debugging and to ensure Webpack generates consistent chunk names, you can add a magic comment to your async component imports:

import VueRouter from 'vue-router';
export default new VueRouter({
    routes: [
        {
            path: '/', 
            name: 'main', 
            component: () => import(/* webpackChunkName: "bonus-list" */ './components/BonusList')
        },
        {
            path: '/create', 
            name: 'create', 
            component: () => import(/* webpackChunkName: "bonus-edit" */ './components/BonusEdit')
        },
    ]
});

5. Clean Build Cache #

Old cached files from Webpack 3 can cause conflicts. Delete your public/assets/admin directory (or your build output folder) and clear any node_modules caches:

rm -rf public/assets/admin
rm -rf node_modules/.cache # If using webpack-dev-server

Then re-run your build or dev server.

Updated Webpack Config Example #

Here's your full config with the necessary fixes applied:

const ENV = process.env.NODE_ENV || 'production';
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const conf = {
    entry: {
        'catalog/bonus': './app/Admin/assets/catalog/bonus/index.js'
    },
    output: {
        filename: '[name].js',
        chunkFilename: '[name].chunk.js',
        path: `${__dirname}/public/assets/admin`,
        publicPath: '/assets/admin/',
    },
    resolve: {
        alias: {
            'vue$': 'vue/dist/vue.esm.js',
            '@src': path.resolve(__dirname)
        },
        extensions: ['*', '.js', '.vue', '.json'],
    },
    plugins: [
        new VueLoaderPlugin(),
    ],
    module: {
        rules: [
            {
                test: /\.vue$/,
                loader: 'vue-loader',
            },
            // Add Babel loader for JS files (critical for ES6 support)
            {
                test: /\.js$/,
                loader: 'babel-loader',
                exclude: /node_modules/
            }
        ],
    },
};
if (ENV === 'development') {
    conf.devtool = 'source-map';
}
module.exports = conf;

These steps should resolve the call of undefined error—most likely the root cause was a mismatch between vue-loader and Webpack 4, missing chunk filename configuration, or unhandled dynamic imports.

内容的提问来源于stack exchange，提问作者gregman