反应-可加载SSR与Webpack 4和Babel 7

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

因此，这个问题可能与我在上面看到的服务器错误有关，但提供的信息更少。

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

我一直没能找到一个确切的例子来证明这一点。有冲突的信息，关于适当的设置。例如，react可加载的自述文件要求使用包含的react-loadable/babel插件，而库作者的这个职位则要求使用babel-plugin-import-inspector。这个公关似乎试图解决Webpack的4个问题，但被关闭，而分叉的自由似乎也有问题。

我正在使用：

• 巴贝尔7
• 节点10.4
• 反应16.5
• React可加载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" );

我希望这会有所帮助;)