[英]React-Loadable SSR with Webpack 4 and Babel 7
Does server-side rendering with react-loadable
work with Webpack 4 and Babel 7? 带有react-loadable
服务器端渲染是否可以与Webpack 4和Babel 7一起使用? I've been unable to get it working successfully while following the instructions . 按照说明操作,我无法成功运行。
After following just the client-side steps, Webpack correctly outputs separate chunks for each loadable component and this is reflected when I load the page in the browser (ie: the chunks are lazy-loaded). 在仅遵循客户端步骤之后,Webpack正确地为每个可加载组件输出单独的块,这在我在浏览器中加载页面时反映出来(即:块是延迟加载的)。
After following all the SSR steps, however, the server throws the following error: 但是,在执行所有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)
My routes/index.js
file: 我的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 on SO is possibly related to the server error I'm seeing above, but provided even less info. SO上的这个问题可能与我上面看到的服务器错误有关,但提供的信息更少。
My .babelrc
is already using @babel/plugin-syntax-dynamic-import
, but I tried adding babel-plugin-dynamic-import-node
. 我的.babelrc
已经在使用@babel/plugin-syntax-dynamic-import
,但我尝试添加babel-plugin-dynamic-import-node
。 This fixes the server issue but Webpack then no longer builds the chunks. 这解决了服务器问题,但Webpack不再构建块。
I've been unable to find a definitive example to get this working. 我一直无法找到一个确定的例子来让这个工作。 There is conflicting info out there about proper setup. 有关正确设置的信息存在冲突。 For example, the react-loadable README says to use the included react-loadable/babel
plugin, while this post by the lib author says to use babel-plugin-import-inspector
. 例如,反应加载的README说使用包含的react-loadable/babel
插件,而lib作者的这篇文章说使用babel-plugin-import-inspector
。 This PR seemed to be attempting to address Webpack 4 issues but was closed, and the forked lib appeared to have issues as well. 这个PR似乎试图解决Webpack 4问题,但已经关闭,分叉的lib似乎也有问题。
I am using: 我在用:
I had the exact same problem today. 我今天遇到了同样的问题。 After adding dynamic-import-node
to the plugins of my .babelrc
the server worked, but webpack wasn't creating the chunks. 将dynamic-import-node
添加到我的.babelrc
的插件后,服务器工作了,但webpack没有创建块。 I then removed it again from my .babelrc
and moved it to my server script with @babel/register
. 然后我再次从我的.babelrc
删除它并使用@babel/register
将其移动到我的服务器脚本。 My server script now looks like this: 我的服务器脚本现在看起来像这样:
require( "@babel/register" )({
presets: ["@babel/preset-env", "@babel/preset-react"],
plugins: ["dynamic-import-node"]
});
require( "./src/server" );
I hope this helps ;) 我希望这有帮助 ;)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.