加载Laravel登录页面报错：Cannot read property 'call' of undefined

Problem Description #

I've never modified the Webpack configuration since the project started, but suddenly encountered an error: the login page shows no content, and the error message is:
Uncaught (in promise) TypeError: Cannot read property 'call' of undefined at __webpack_require__ (app.js:64) at app.js:73038

The only change I made was moving the User model from the app directory to app/Models, and updating all related reference paths. Here's my webpack.mix.js configuration:

const mix = require('laravel-mix');
const path = require('path');

mix.js('resources/js/app.js', 'public/js')
    .sass('resources/sass/app.scss', 'public/css')
    .webpackConfig({
        output: {
            chunkFilename: 'js/[name].js?id=[chunkhash]'
        },
        resolve: {
            alias: {
                vue$: 'vue/dist/vue.runtime.esm.js',
                '@': path.resolve('resources/js'),
            },
        },
    })
    .babelConfig({
        plugins: ['@babel/plugin-syntax-dynamic-import'],
    })
    .version();

Possible Causes & Solutions #

This error is usually tied to Webpack caching issues or chunk loading mismatches. Even though you didn't touch the Webpack config, moving the model might have triggered hidden dependency reference changes, and Laravel Mix's caching mechanism could be causing old chunk files to conflict with new code. Try these steps:

• 1. Clear all cache files thoroughly
  First wipe out all cached assets and application data:

  • Clear Laravel's app cache: php artisan cache:clear && php artisan config:clear && php artisan view:clear
  • Delete old compiled frontend files: Remove everything in the public/js and public/css directories (keep any custom static files if you have them)
  • Clear Node module cache: npm cache clean --force

• 2. Reinstall dependencies and recompile
  Next, rebuild your frontend setup from scratch:

  rm -rf node_modules
  npm install
  npm run dev # Use npm run production for production environments
  

• 3. Check dynamic imports for reference issues
  You're using @babel/plugin-syntax-dynamic-import, so there are likely dynamically imported Vue components/modules in your project. Double-check these import paths to make sure none are indirectly referencing the old User model path—even if you updated most references manually, dynamic imports might have slipped through the cracks.
  Also, scan resources/js files for relative imports that might be broken indirectly due to the model move (sometimes backend class path changes can trickle into frontend state management or API-related code).

• 4. Test by temporarily disabling versioning
  Your Mix config enables .version(), which adds hashes to static files. Old hash caches in the browser can sometimes load the wrong chunk files. Try commenting out the .version() line temporarily, recompile, and test the page:

  // .version();
  

  If the page works, it's a caching issue. Re-enable .version() and force a hard browser refresh (Ctrl+Shift+R) to load the new hashed files.

• 5. Verify Webpack chunk generation
  After compilation, check if all expected chunk files are present in public/js. If any chunk is missing, there might be a hidden compilation error. Run npm run dev --verbose to view detailed build logs and spot any unreported issues.

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