title: ChunkLoadError: Loading chunk register failed
body: <p>I am currently trying to implement lazy loading of routes in VueJS3 and Laravel. I'm using vue-router to implement my routes.</p>
  <p>Unfortunately, whenever I click on a link, nothing happens and after 30 seconds, I see a timeout error pop up in my browser console. If I replace lazy loading of the routes with a direct import, everything runs fine.</p>
  <p>I would appreciate any hints as to what might be going on here. I've had the problem for a couple of weeks now. All other posts and suggestions to clear browser cache or set the public path in webpack.config.js have not worked for me. I have also replaced laravel-mix with webpack and the problem remains.</p>
  <hr />
  <h2>Pre-conditions:</h2>
  <ul>
  <li>Webpack 5.69.1</li>
  <li>Webpack-cli ^4.9.2</li>
  <li>Vue ^3.2.31</li>
  <li>Vue-router ^4.0.12</li>
  <li>Laravel 7.2</li>
  </ul>
  <h2>Steps to reproduce</h2>
  <ol>
  <li>Run <strong>npm run production</strong></li>
  <li>Run <strong>php artisan serve</strong></li>
  <li>Open browser</li>
  <li>Enter desired URL in browser: <strong><a href="http://127.0.0.1:8000/login" rel="nofollow noreferrer">http://127.0.0.1:8000/login</a></strong></li>
  <li>Click on &quot;Register&quot; link after login page opens.</li>
  </ol>
  <h2>Expected behavior</h2>
  <ol>
  <li>Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.</li>
  <li>Laravel server starts</li>
  <li>Website is reacheable over <a href="http://127.0.0.1:8000" rel="nofollow noreferrer">http://127.0.0.1:8000</a></li>
  <li>Login page opens component configured in the route. Login.js is downloaded by the browser.</li>
  <li>Browser downloads register.js dynamically. Registration page is displayed</li>
  </ol>
  <h2>Observed behavior</h2>
  <ol>
  <li>Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.</li>
  <li>Laravel server starts</li>
  <li>Website is reacheable over <a href="http://127.0.0.1:8000" rel="nofollow noreferrer">http://127.0.0.1:8000</a></li>
  <li>Login page opens component configured in the route. Login.js is downloaded by the browser.</li>
  <li>register.js chunk is never downloaded. Registration page is never displayed. After 30 seconds timeout, error is printed in browser console.</li>
  </ol>
  <pre><code>ChunkLoadError: Loading chunk register failed.
  (timeout: http://127.0.0.1:8000/dist/register.d3e633a9a1aea3ebf47b.js)
      at Object.__webpack_require__.f.j (main.34a1a3da92d476b41479.js:4051:29)
      at main.34a1a3da92d476b41479.js:3905:40
      at Array.reduce (&lt;anonymous&gt;)
      at Function.__webpack_require__.e (main.34a1a3da92d476b41479.js:3904:67)
      at component (routes.js:35:55)
      at extractComponentsGuards (vue-router.esm-bundler.js:2037:40)
      at eval (vue-router.esm-bundler.js:3156:22)
  </code></pre>
  <hr />
  <h2>webpack.config.js</h2>
  <pre><code>const path = require('path');
  const {VueLoaderPlugin} = require('vue-loader');
  const { WebpackManifestPlugin } = require('webpack-manifest-plugin');
  const options = {basePath:'/dist/',fileName:'../mix-manifest.json',publicPath:'dist/'};
  const webpack = require('webpack');
  
  module.exports = {
      mode: 'development',
      entry: './resources/js/main.js',
      output: {
          clean: true,
          filename: &quot;[name].[chunkhash].js&quot;,
          publicPath: './dist/',
          path: path.resolve(__dirname, 'public/dist'),
          chunkLoadTimeout: 30000,
      },
      resolve:{
          alias: {
              '@': path.resolve(__dirname,'resources/js'),
          },
          extensions: ['.js', '.vue', '.json']
      },
      module: {
          rules: [
              {
                  test: /\.vue$/,
                  use: 'vue-loader'
              },
              {
                  test: /\.css$/,
                  use: [
                      'vue-style-loader',
                      'css-loader'
                  ]
              }
          ]
      },
      plugins: [
          new VueLoaderPlugin(),
          new WebpackManifestPlugin(options),
          new webpack.DefinePlugin({
              __VUE_OPTIONS_API__: false,
              __VUE_PROD_DEVTOOLS__: false,
          }),
      ]
  };
  
  </code></pre>
  <h2>routes.js</h2>
  <pre><code>
  const routes = [
      {
           path: &quot;/&quot;,
           component: DefaultLayout,
           children: [
               {
                   path: &quot;/publicidade&quot;,
                   name: &quot;publicidade&quot;,
                   component: () =&gt; import (/* webpackChunkName: &quot;publicity&quot; */ '../pages/Publicidade')
               },
               {
                   path: &quot;/login&quot;,
                   name: &quot;login&quot;,
                   component: () =&gt; import(/* webpackChunkName: &quot;login&quot; */ '../pages/login.vue')
               },
               {
                   path: &quot;/cadastro&quot;,
                   name: &quot;cadastro&quot;,
                   component: () =&gt; import(/* webpackChunkName: &quot;register&quot; , webpackPrefetch: true */ '../pages/Register.vue')
               },
               {
                   path: &quot;perfil&quot;,
                   name: &quot;perfil&quot;,
                   component: () =&gt; import('../pages/Profile')
               },
           ],
      },
  
      { path: &quot;/:catchAll(.*)&quot;, component: NotFoundPage }
  ];
  </code></pre>