Usando o React preguiçoso ao navegar para uma rota aninhada que o pacote principal não carrega

8

Estou usando reagir roteador com o carregamento lento de componentes e usando Webpack como uma bundler , Quando eu acesso ao home page / eu posso ver na guia de rede que o bundle.jsestá carregado e também quando eu clicar em um item específico na barra lateral do componente correspondente é carregado com sucesso com seu nome de arquivo, por exemplo 0.bundle.js, no entanto, quando navego diretamente da barra de pesquisa para uma rota aninhada (exemplo http://127.0.0.1:8080/forms/select), recebo um erro como este:

GET http://127.0.0.1:8080/forms/bundle.jsnet :: ERR_ABORTED 404 (Não encontrado)

Este erro indica que bundle.jsnão está carregado, o que significa que não pode carregar os outros pedaços.

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;

renderização de rotas

<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
fonte
1
Isso não está relacionado à reação do roteador, pois não direciona seus ativos. É um sido um tempo desde que eu tenha configurado Webpack, mas eu tenho certeza que o problema é na interação entre publicPath, entrye / ou outputcaminhos, precisa de um path.resolve()ou dois lá dentro.
Ryan Florence
@RyanFlorencethanks pela sua resposta, eu encontrei a solução
Boussadjra Brahim 20/01

Respostas:

5

Depois de alguns dias tentando soluções diferentes, finalmente encontrei uma que salva meu dia:

... finalmente descobri o problema real e ele não está diretamente relacionado ao Webpack ou ao React Hot Loader ou ao React Router ou a qualquer outra biblioteca, pelo menos por enquanto, pelo menos por mim. Ao usar o estado push HTML5 para manipular o histórico dos navegadores, DEVEMOS FORNECER a tag em nossa seção de cabeçalho html. Depois de fornecer a seção principal do meu html, o HMR funciona como um encanto, mesmo em rotas aninhadas.

<!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
fonte