我正在尝试使用 ServerSide Rendering 使 react-loadable 工作。我有一个相当大的应用程序,它使用多个 HOCconnect
组件,添加路由器等。
组件似乎没问题,而是通过react-redux
或其他 HOC 连接的智能组件。
react-loadable
似乎并没有将其作为单独的模块并在.json
创建的模块中undefined
抛出。
正确加载的哑组件示例:
"common/HeaderTitle": [
{
"id": 667,
"name": "./src/app/components/common/HeaderTitle.jsx",
"file": "0.650d44243e1a15fa7627.js"
},
{
"id": 667,
"name": "./src/app/components/common/HeaderTitle.jsx",
"file": "0.650d44243e1a15fa7627.js.map"
},
...
],
不加载的智能组件示例:
"undefined": [
{
"id": 626,
"name": "./src/app/components/modules/Home/index.jsx",
"file": "0.650d44243e1a15fa7627.js"
},
...
],
我的服务器的 html 渲染如下所示。这里的所有内容都是从官方文档中复制的:
app.use((req, res) => {
const modules = [];
const html = SSR ? renderToString(
<Provider store={store}>
<StaticRouter location={req.url} context={{}}>
<Loadable.Capture report={moduleName => modules.push(moduleName)}>
<App />
</Loadable.Capture>
</StaticRouter>
</Provider>,
) : ' ';
console.log('modules', modules);
const bundles = getBundles(stats, modules);
console.log('bundles', bundles);
res.status(200).send(renderFullPage({ html, bundles }));
});
哪个按预期记录:
modules [ './modules/Home' ]
bundles [ undefined ]
TypeError: Cannot read property 'file' of undefined
这真的让我发疯。这个包看起来真的很好,我想使用它。但是我找不到任何关于此类问题的信息,而且 Github 上也没有问题部分。
接受任何建议或帮助。提前致谢。