I am currently trying to implement lazy loading of routes in VueJS3 and Laravel. I'm using vue-router to implement my routes.

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.

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.

---

Pre-conditions:

• Webpack 5.69.1
• Webpack-cli ^4.9.2
• Vue ^3.2.31
• Vue-router ^4.0.12
• Laravel 7.2

Steps to reproduce

1. Run npm run production
2. Run php artisan serve
3. Open browser
4. Enter desired URL in browser: http://127.0.0.1:8000/login
5. Click on "Register" link after login page opens.

Expected behavior

1. Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.
2. Laravel server starts
3. Website is reacheable over http://127.0.0.1:8000
4. Login page opens ponent configured in the route. Login.js is downloaded by the browser.
5. Browser downloads register.js dynamically. Registration page is displayed

Observed behavior

1. Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.
2. Laravel server starts
3. Website is reacheable over http://127.0.0.1:8000
4. Login page opens ponent configured in the route. Login.js is downloaded by the browser.
5. register.js chunk is never downloaded. Registration page is never displayed. After 30 seconds timeout, error is printed in browser console.

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 (<anonymous>)
    at Function.__webpack_require__.e (main.34a1a3da92d476b41479.js:3904:67)
    at ponent (routes.js:35:55)
    at extractComponentsGuards (vue-router.esm-bundler.js:2037:40)
    at eval (vue-router.esm-bundler.js:3156:22)

---

webpack.config.js

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: "[name].[chunkhash].js",
        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,
        }),
    ]
};

routes.js

const routes = [
    {
         path: "/",
         ponent: DefaultLayout,
         children: [
             {
                 path: "/publicidade",
                 name: "publicidade",
                 ponent: () => import (/* webpackChunkName: "publicity" */ '../pages/Publicidade')
             },
             {
                 path: "/login",
                 name: "login",
                 ponent: () => import(/* webpackChunkName: "login" */ '../pages/login.vue')
             },
             {
                 path: "/cadastro",
                 name: "cadastro",
                 ponent: () => import(/* webpackChunkName: "register" , webpackPrefetch: true */ '../pages/Register.vue')
             },
             {
                 path: "perfil",
                 name: "perfil",
                 ponent: () => import('../pages/Profile')
             },
         ],
    },

    { path: "/:catchAll(.*)", ponent: NotFoundPage }
];

I am currently trying to implement lazy loading of routes in VueJS3 and Laravel. I'm using vue-router to implement my routes.

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.

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.

---

Pre-conditions:

• Webpack 5.69.1
• Webpack-cli ^4.9.2
• Vue ^3.2.31
• Vue-router ^4.0.12
• Laravel 7.2

Steps to reproduce

1. Run npm run production
2. Run php artisan serve
3. Open browser
4. Enter desired URL in browser: http://127.0.0.1:8000/login
5. Click on "Register" link after login page opens.

Expected behavior

1. Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.
2. Laravel server starts
3. Website is reacheable over http://127.0.0.1:8000
4. Login page opens ponent configured in the route. Login.js is downloaded by the browser.
5. Browser downloads register.js dynamically. Registration page is displayed

Observed behavior

1. Npm runs successfully manifest.json is updated. Webpack generates all chunks in dists folder.
2. Laravel server starts
3. Website is reacheable over http://127.0.0.1:8000
4. Login page opens ponent configured in the route. Login.js is downloaded by the browser.
5. register.js chunk is never downloaded. Registration page is never displayed. After 30 seconds timeout, error is printed in browser console.

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 (<anonymous>)
    at Function.__webpack_require__.e (main.34a1a3da92d476b41479.js:3904:67)
    at ponent (routes.js:35:55)
    at extractComponentsGuards (vue-router.esm-bundler.js:2037:40)
    at eval (vue-router.esm-bundler.js:3156:22)

---

webpack.config.js

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: "[name].[chunkhash].js",
        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,
        }),
    ]
};

routes.js

const routes = [
    {
         path: "/",
         ponent: DefaultLayout,
         children: [
             {
                 path: "/publicidade",
                 name: "publicidade",
                 ponent: () => import (/* webpackChunkName: "publicity" */ '../pages/Publicidade')
             },
             {
                 path: "/login",
                 name: "login",
                 ponent: () => import(/* webpackChunkName: "login" */ '../pages/login.vue')
             },
             {
                 path: "/cadastro",
                 name: "cadastro",
                 ponent: () => import(/* webpackChunkName: "register" , webpackPrefetch: true */ '../pages/Register.vue')
             },
             {
                 path: "perfil",
                 name: "perfil",
                 ponent: () => import('../pages/Profile')
             },
         ],
    },

    { path: "/:catchAll(.*)", ponent: NotFoundPage }
];

• javascript
• laravel
• vue.js
• webpack
• vue-router

Share Improve this question Follow asked Mar 2, 2022 at 10:11 thePHPHerothePHPHero 18911 gold badge33 silver badges1010 bronze badges 3

• 1 i think there is an error with your Register.vue, check the console logs, try to disable prefetch perhaps it's causing issue – Lk77 Commented Mar 4, 2022 at 16:00
• Hi. I disabled pre-fetch and even tried removing the import ments all together. Unfortunately it's still failing. I tried removing all the content from Register.vue, leaving only the template, no dice. – thePHPHero Commented Mar 4, 2022 at 21:22
• @Lk77 I actually figured it out while stepping through the webpack code linked in the console logs. The scripts were being blocked by a service called Osano which I use to display GPDR Consent here in Europe. – thePHPHero Commented Mar 4, 2022 at 21:55

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 1

After a couple of weeks of head banging I was able to locate the problem by stepping through the Webpack code starting at the Webpack.require call (See my error log above).

My issue was that my chunks were being blocked by the Osano GPDR Consent service, which I use in my website to satisfy EU privacy laws.

As soon as I removed the osano script tag from the header of my site, everything just worked.

<script src="https://cmp.osano./AzZcqMSBLrjhQ2PZ1/4e3118ce-1798-4f27-93be-f6c9e99f1537/osano.js"></script>

Since GPDR Consent is a must here in Europe, I had to add a rule to the Dashboard of my Osano account in order to allow scripts from 127.0.0.1:8080 domain.

I had the same problem in vue, I solved it using a method similar to the method Polymer uses to import the lazy loading resources.

Example:

setTimeout(() => {
  for (let i in routes[0].children ){
    routes[0].children[i].ponent();
  }
}, 1000)