node.js - 使用 Webpack 4 和 Babel 7 的 React-Loadable SSR

Question

使用 react-loadable 的服务器端渲染是否适用于 Webpack 4 和 Babel 7？在关注 the instructions 时，我一直无法让它成功运行.

仅执行客户端步骤后，Webpack 会为每个可加载组件正确输出单独的 block ，这会在我在浏览器中加载页面时反射(reflect)出来(即: block 是延迟加载的)。

然而，在完成所有 SSR 步骤后，服务器抛出以下错误:

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)

我的 routes/index.js 文件:

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,
  },
  ...
];

This issue on SO 可能与我在上面看到的服务器错误有关，但提供的信息更少。

我的 .babelrc 已经在使用 @babel/plugin-syntax-dynamic-import，但我尝试添加 babel-plugin-dynamic-import-node .这解决了服务器问题，但 Webpack 不再构建 block 。

我一直无法找到一个明确的例子来让它工作。关于正确设置的信息相互矛盾。例如，react-loadable README 说要使用包含的 react-loadable/babel 插件，而 this post lib 作者说要使用 babel-plugin-import-inspector。 This PR似乎试图解决 Webpack 4 问题但已关闭， fork 的库似乎也有问题。

我正在使用:

• 巴别塔 7
• Node 10.4
• react 16.5
• React-Loadable 5.5
• 网页包 4

Answer 1

我今天遇到了完全相同的问题。将 dynamic-import-node 添加到我的 .babelrc 的插件后，服务器工作了，但 webpack 没有创建 block 。然后我再次将它从我的 .babelrc 中删除，并使用 @babel/register 将它移动到我的服务器脚本中。我的服务器脚本现在看起来像这样:

require( "@babel/register" )({
    presets: ["@babel/preset-env", "@babel/preset-react"],
    plugins: ["dynamic-import-node"]
});
require( "./src/server" );

我希望这对您有所帮助；)