使用webpack 3进行react-loadable和服务器端渲染

Question

我正在为react-router-v4使用react-loadable ，我想做服务器端渲染。 当然，在服务器端，我不需要延迟加载，所以我开始使用react-loadable ，因为它表示可以在import-inspector babel插件的帮助下与服务器一起使用。

但是不幸的是，我的服务器控制台require.ensure is not a function出现错误，这require.ensure is not a function ，这导致了客户端的重新渲染，并且我失去了服务器端渲染的所有好处。

在我使用react-router-v3并将getComponent与import一起使用之前，没有任何问题。

这是我的路线配置。

export default [
    {
        component: Root,
        routes: [
            {
                path: '/',
                component: Loadable({
                    loader: () => import('./Parent.jsx'),
                    loading: () => <div>Loading...</div>
                }),
                routes: [
                    {
                        path: '/',
                        exact: true,
                        component: Loadable({
                            loader: () => import('./Child.jsx'),
                            loading: () => <div>Loading...</div>
                        })
                    }
                ]
            }
        ]
    }
];

这是我的.babelrc

{
    presets : [["es2015", {modules: false}], "react", "stage-2", "stage-3"],
    plugins: [ 
        "transform-runtime", 
        "syntax-async-functions", 
        "dynamic-import-webpack"
    ],
    env: {
        node: {
            plugins: [
                ["import-inspector", {
                  "serverSideRequirePath": true,
                  "webpackRequireWeakId": true,
                }],
                ["babel-plugin-webpack-alias", {
                    "config": "webpack/server.js",
                    "findConfig": true
                }]
            ]
        }
    }
}

在客户端上，它可以完美运行，唯一的错误是标记校验和差异错误。 这应该如何工作？

提前致谢！

Answer 1

尝试将其添加到babel或babel加载程序

“动态导入节点”，

那是来自airbnb