使用 Webpack 4 和 Babel 7 的 React-Loadable SSR
React-Loadable SSR with Webpack 4 and Babel 7
使用 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,
},
...
];
SO 上的 This issue 可能与我在上面看到的服务器错误有关,但提供的信息更少。
我的 .babelrc
已经在使用 @babel/plugin-syntax-dynamic-import
,但我尝试添加 babel-plugin-dynamic-import-node
。这解决了服务器问题,但 Webpack 不再构建块。
我一直无法找到一个明确的例子来让它工作。关于正确设置的信息相互矛盾。例如,react-loadable README 说要使用包含的 react-loadable/babel
插件,而 this post by the lib author says to use babel-plugin-import-inspector
. This PR 似乎试图解决 Webpack 4 问题但已关闭,并且分叉的库似乎也有问题。
我正在使用:
- 通天塔 7
- 节点 10.4
- 反应 16.5
- React-Loadable 5.5
- Webpack 4
我今天遇到了完全相同的问题。将 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" );
希望对您有所帮助 ;)
使用 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,
},
...
];
SO 上的 This issue 可能与我在上面看到的服务器错误有关,但提供的信息更少。
我的 .babelrc
已经在使用 @babel/plugin-syntax-dynamic-import
,但我尝试添加 babel-plugin-dynamic-import-node
。这解决了服务器问题,但 Webpack 不再构建块。
我一直无法找到一个明确的例子来让它工作。关于正确设置的信息相互矛盾。例如,react-loadable README 说要使用包含的 react-loadable/babel
插件,而 this post by the lib author says to use babel-plugin-import-inspector
. This PR 似乎试图解决 Webpack 4 问题但已关闭,并且分叉的库似乎也有问题。
我正在使用:
- 通天塔 7
- 节点 10.4
- 反应 16.5
- React-Loadable 5.5
- Webpack 4
我今天遇到了完全相同的问题。将 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" );
希望对您有所帮助 ;)