Usando React lazy loading cuando navego a una ruta anidada, el paquete principal no se carga

8

Estoy usando el enrutador de reacción con carga lenta de componentes y uso Webpack como un paquete , cuando accedo a la página de inicio / puedo ver en la pestaña de red que bundle.jsestá cargado y también cuando hago clic en un elemento específico en la barra lateral del componente correspondiente se carga correctamente con su nombre de archivo, por ejemplo 0.bundle.js, sin embargo, cuando navego directamente desde la barra de búsqueda a una ruta anidada (ejemplo http://127.0.0.1:8080/forms/select) obtengo un error como este:

OBTENER http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404 (no encontrado)

Este error indica que bundle.jsno está cargado, lo que significa que no puede cargar los otros fragmentos.

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('../components/uiViews/Forms'));
const SelectForm = lazy(() => import('../components/uiViews/Forms/SelectForm'));
const FormValidation = lazy(() => import('../components/uiViews/Forms/FormValidation'));

const routes = [

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


];

export default routes;

representación de rutas

<Suspense fallback={<div className="spin-loading">  <Spin size="large" /></div>}>
                {routes.map((route, i) => {
                    return route.component ? 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 component={() =>route.component? <route.component />:<ComingSoon/>} />
    );
}
javascript reactjs webpack react-router lazy-loading Boussadjra Brahim
fuente
1
Esto no está relacionado con el enrutador de reacción, ya que no dirige sus activos. Es un pasado un tiempo desde que he preparado webpack, pero estoy bastante seguro de que el problema está en la interacción entre publicPath, entryy / o outputcaminos, necesitan una path.resolve()o dos allí.
Ryan Florence
@RyanFlorencegracias por su respuesta, encontré la solución
Boussadjra Brahim

Respuestas:

5

Después de algunos días de probar diferentes soluciones, finalmente encontré esta que me salva el día:

... Finalmente descubrí el problema real y no está directamente relacionado con Webpack o React Hot Loader o React Router o cualquier otra biblioteca, al menos por ahora, al menos para mí. Cuando se utiliza el estado de inserción HTML5 para manipular el historial de navegadores, DEBEMOS PROPORCIONAR la etiqueta en nuestra sección de encabezado html. Después de proporcionar a la sección principal de mi html, HMR funciona de maravilla incluso en rutas anidadas.

<!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>
Boussadjra Brahim
fuente