代码之家 › 专栏 › 技术社区 › ericgio

用Webpack 4和Babel 7反应可加载SSR

react-loadable webpack-4 babeljs reactjs node.js

ericgio · 技术社区 · 6 年前

服务器端呈现与 react-loadable 使用Webpack4和Babel 7?我一直无法让它成功地工作,而下面 the instructions .

但是,在完成所有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

我的 .babelrc 正在使用 @babel/plugin-syntax-dynamic-import babel-plugin-dynamic-import-node . 这修复了服务器问题,但Webpack不再构建块。

我一直找不到一个确切的例子来实现这个功能。关于正确的设置有冲突的信息。例如,react loadable README说使用included react-loadable/babel this post 由lib作者说要用 babel-plugin-import-inspector . This PR 似乎试图解决webpack4的问题,但关闭了,分叉的lib似乎也有问题。

巴别塔7
反应16.5
反应负荷5.5

1 回复 | 直到 6 年前

Quinten 5 年前

我今天也遇到了同样的问题。添加后 dynamic-import-node 我的插件 .babelrc 服务器正常工作,但webpack没有创建块。然后我又把它从我的把它移到我的服务器脚本 @babel/register

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

我希望这有帮助;)

推荐文章