Reactjs React可加载导入连接组件

我正在尝试使用服务器端渲染使react可加载。我有一个相当大的应用程序，使用多个HOC连接组件，添加路由器等

组件似乎运行正常，而是通过

react redux

或其他HOC连接的智能组件。

react loadable

似乎不是这样的，因为这是独立的模块，在创建的

未定义的
中抛出
.json

正确加载的哑组件示例：

"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 }));
});

这真的快把我逼疯了。这个包看起来真的很好，我想用它。但我找不到任何关于这类问题的信息，Github上也没有问题部分

愿意接受任何建议或帮助。提前谢谢。
只是一个猜测，但我认为这与您正在导入
index.js
有关，react loadable不会在
loadable.Capture中发现这一点。或者wepback插件没有在
react loadable.json
文件中创建正确的映射

我在生产应用程序（包括react router、redux、react loadable）中使用的一个技巧是使用webpack的命名块：

const AsyncComponent = Loadable({
    loader: () => import(/* webpackChunkName: "myNamedChunk" */ './SomeComponent'),
    modules: ['myNamedChunk']
});

通过这种方式，您可以控制模块名称并显式告诉react loadable映射什么

我还写了一篇关于如何在create-react-app项目中实现这一点的文章：
如何使用react-loadable导入异步组件？您的问题@ronnyr解决了吗？谢谢您的回复。我不知道区块名称。我添加了块名称，这是一个很大的改进。不幸的是，这并不能解决我的问题。Webpack很好地创建了块，但在
react loadable
中，它在
undefined
中不断缩进块。但这些模块似乎都不起作用。我为
NotFound
组件添加了模块
404
，但在json中它仍然引用
“/common/NotFound”
。也检查了你的文章，也没有看到任何破坏性的变化。。但再次感谢您的回复。我想试试别的东西。。
const AsyncComponent = Loadable({
    loader: () => import(/* webpackChunkName: "myNamedChunk" */ './SomeComponent'),
    modules: ['myNamedChunk']
});