首页 文章

带有Webpack 4和Babel 7的可反复加载的SSR

提问于
浏览 次
4

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

在仅遵循客户端步骤之后，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,
  },
  ...
];

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

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

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

我在用：

  • 巴贝尔7

  • 节点10.4

  • 反应16.5

  • React-Loadable 5.5

  • Webpack 4

node.js reactjs babeljs webpack-4 react-loadable

1 回答

  • 0

    我今天遇到了同样的问题 . 将 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" );

    我希望这有帮助 ;）

    回复于

相关问题