SSR React-Loadable com Webpack 4 e Babel 7
Faz renderização do lado do servidor comreact-loadable
trabalha com Webpack 4 e Babel 7? Não consegui fazê-lo funcionar com êxito ao seguirAs instruçõe.
Após seguir apenas as etapas do lado do cliente, o Webpack gera corretamente pedaços separados para cada componente carregável e isso é refletido quando eu carrego a página no navegador (ou seja: os pedaços são carregados com preguiça
Depois de seguir todas as etapas do SSR, no entanto, o servidor lança o seguinte erro:
Error: Not supported
at loader (/Projects/test-project/web/routes/index.js:50:15)
at load (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:28:17)
at init (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:121:13)
at flushInitializers (/Projects/test-project//web/node_modules/react-loadable/lib/index.js:310:19)
at /Projects/test-project/web/node_modules/react-loadable/lib/index.js:322:5
at new Promise (<anonymous>)
at Function.Loadable.preloadAll (/Projects/test-project/web/node_modules/react-loadable/lib/index.js:321:10)
at Object.preloadAll (/Projects/test-project/web/server.js:15:10)
at Module._compile (internal/modules/cjs/loader.js:702:30)
at Module._compile (/Projects/test-project/web/node_modules/pirates/lib/index.js:83:24)
Minhasroutes/index.js
Arquivo
import React from 'react';
import Loadable from 'react-loadable';
import Loading from '../components/Loading';
export default [
{
path: '/',
component: Loadable({
loader: () => import('./controllers/IndexController'),
loading: Loading,
}),
exact: true,
},
{
path: '/home',
component: Loadable({
loader: () => import('./controllers/HomeController'),
loading: Loading,
}),
exact: true,
},
...
];
Esse assunt no SO está possivelmente relacionado ao erro do servidor que estou vendo acima, mas forneceu ainda menos informaçõe
Minhas.babelrc
já está usando@babel/plugin-syntax-dynamic-import
, mas tentei adicionarbabel-plugin-dynamic-import-node
. Isso corrige o problema do servidor, mas o Webpack não cria mais os pedaço
Não consegui encontrar um exemplo definitivo para fazer isso funcionar. Existem informações conflitantes sobre a configuração correta. Por exemplo, o README com capacidade de reação diz para usar oreact-loadable/babel
plugin, enquantoesta postage pelo autor da lib diz usarbabel-plugin-import-inspector
. This PR @ parecia estar tentando resolver os problemas do Webpack 4, mas estava fechado, e a lib bifurcada parecia ter problemas també
Estou usando
Babel 7Node 10.4React 16.5 React-Loadable 5.5Webpack 4