I'm using react router with ponent lazy loading and using Webpack as a bundler, When I access to the home page / I can see in the network tab that the bundle.js is loaded and also when I click on a specific item in the sidebar the correspondent ponent is loaded successfully with its file name for example 0.bundle.js, However when I navigate directly from the search bar to a nested route (example http://127.0.0.1:8080/forms/select) i get an error like the following:

GET http://127.0.0.1:8080/forms/bundle.js net::ERR_ABORTED 404 (Not Found)

This error indicates that the bundle.js is not loaded which means that it cannot load the other chunks.

webpack.config.js

const webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    module: {
        rules: [],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js',
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        historyApiFallback: true,
        
    },
};

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

routes.js

import { lazy } from 'react';

const Forms = lazy(() => import('../ponents/uiViews/Forms'));
const SelectForm = lazy(() => import('../ponents/uiViews/Forms/SelectForm'));
const FormValidation = lazy(() => import('../ponents/uiViews/Forms/FormValidation'));

const routes = [

    {
        icon: 'form',
        label: 'forms',
        path: '/forms',
        ponent: Forms,
        children: [
            {
                icon: 'select',
                label: 'selectInput',
                path: '/forms/select',
                ponent: SelectForm,
            },
            { icon: 'issues-close', label: 'formValidation', path: '/forms/validation', ponent: FormValidation },
            {
                icon: 'form',
                label: 'wizardForm',
                path: '/forms/wizard',
                ponent: WizardForm,
            }],
    },
    

];

export default routes;

routes rendering

<Suspense fallback={<div className="spin-loading">  <Spin size="large" /></div>}>
                {routes.map((route, i) => {
                    return routeponent ? RouteWithSubRoutes( {...route},`r${i}`) : null;
                })}
</Suspense>

....


function RouteWithSubRoutes(route,key) {
    return route.children ? (
        route.children.map((subRoute,j) => {
            return RouteWithSubRoutes(subRoute,`sr${j}`);
        })
    ) : (
        <Route key={key}  path={route.path} exact ponent={() =>routeponent? <routeponent />:<ComingSoon/>} />
    );
}

I'm using react router with ponent lazy loading and using Webpack as a bundler, When I access to the home page / I can see in the network tab that the bundle.js is loaded and also when I click on a specific item in the sidebar the correspondent ponent is loaded successfully with its file name for example 0.bundle.js, However when I navigate directly from the search bar to a nested route (example http://127.0.0.1:8080/forms/select) i get an error like the following:

GET http://127.0.0.1:8080/forms/bundle.js net::ERR_ABORTED 404 (Not Found)

This error indicates that the bundle.js is not loaded which means that it cannot load the other chunks.

webpack.config.js

const webpack = require('webpack');
module.exports = {
    entry: './src/index.js',
    module: {
        rules: [],
    },
    resolve: {
        extensions: ['*', '.js', '.jsx'],
    },
    output: {
        path: __dirname + '/dist',
        publicPath: '/',
        filename: 'bundle.js',
    },
    plugins: [new webpack.HotModuleReplacementPlugin()],
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        contentBase: './dist',
        hot: true,
        historyApiFallback: true,
        
    },
};

.babelrc

{
    "presets": [
        "@babel/preset-env",
        "@babel/preset-react"
    ],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
}

routes.js

import { lazy } from 'react';

const Forms = lazy(() => import('../ponents/uiViews/Forms'));
const SelectForm = lazy(() => import('../ponents/uiViews/Forms/SelectForm'));
const FormValidation = lazy(() => import('../ponents/uiViews/Forms/FormValidation'));

const routes = [

    {
        icon: 'form',
        label: 'forms',
        path: '/forms',
        ponent: Forms,
        children: [
            {
                icon: 'select',
                label: 'selectInput',
                path: '/forms/select',
                ponent: SelectForm,
            },
            { icon: 'issues-close', label: 'formValidation', path: '/forms/validation', ponent: FormValidation },
            {
                icon: 'form',
                label: 'wizardForm',
                path: '/forms/wizard',
                ponent: WizardForm,
            }],
    },
    

];

export default routes;

routes rendering

<Suspense fallback={<div className="spin-loading">  <Spin size="large" /></div>}>
                {routes.map((route, i) => {
                    return route.ponent ? RouteWithSubRoutes( {...route},`r${i}`) : null;
                })}
</Suspense>

....


function RouteWithSubRoutes(route,key) {
    return route.children ? (
        route.children.map((subRoute,j) => {
            return RouteWithSubRoutes(subRoute,`sr${j}`);
        })
    ) : (
        <Route key={key}  path={route.path} exact ponent={() =>route.ponent? <route.ponent />:<ComingSoon/>} />
    );
}

• javascript
• reactjs
• webpack
• react-router
• lazy-loading

• 1 This is unrelated to react router, since it doesn't route your assets. It's a been a while since I've set up webpack, but I'm pretty sure the problem is in the interplay between publicPath, entry and/or output paths, need a path.resolve() or two in there. – Ryan Florence Commented Jan 20, 2020 at 19:22

1 Answer 1

After some days of trying out different solutions, finally i found this one that saves my day :

... I finally figured out the actual issue and it is not directly related to either Webpack or React Hot Loader or React Router or any other library at least for now at least for me. When using HTML5 push state to manipulate browsers history WE MUST PROVIDE tag in our html head section. After providing to the head section of my html, HMR works like a charm even in nested routes.

<!DOCTYPE html>
<html>
    <head>
        <base href="/" /> <!-- THIS TINY LITTLE THING -->
        <meta charset="UTF-8" />
        <title>Hello React!</title>
    </head>
    <body>
        <div id="root"></div>
        <script src="/main.bundle.js"></script>
    </body>
</html>