带有Webpack 4和Babel 7的React-Loadable SSR

Question

react-loadable使用Webpack 4和Babel 7进行服务器端渲染吗？按照说明操作,我无法成功运行.

在仅遵循客户端步骤之后,Webpack正确地为每个可加载组件输出单独的块,这在我在浏览器中加载页面时反映出来(即:块是延迟加载的).

但是,在执行所有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,
  },
  ...
];

SO上的这个问题可能与我上面看到的服务器错误有关,但提供的信息更少.

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

我一直无法找到一个确定的例子来让这个工作.有关正确设置的信息存在冲突.例如,反应加载的README表示使用包含的react-loadable/babel插件,而lib作者的这篇文章说要使用babel-plugin-import-inspector.这个PR似乎试图解决Webpack 4问题,但已经关闭,分叉的lib似乎也有问题.

我在用:

• 巴贝尔7
• 节点10.4
• 反应16.5
• React-Loadable 5.5
• Webpack 4

Answer 1

我今天遇到了完全相同的问题。添加dynamic-import-node到我的服务器的插件后.babelrc，服务器工作了，但 webpack 没有创建块。然后我再次将其从我的脚本中删除.babelrc，并将其移动到我的服务器脚本中@babel/register。我的服务器脚本现在如下所示：

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

我希望这有帮助 ;）