Javascript 使用webpack 3响应可加载和服务器端呈现
我正在为Javascript 使用webpack 3响应可加载和服务器端呈现,javascript,reactjs,react-router,lazy-loading,react-router-v4,Javascript,Reactjs,React Router,Lazy Loading,React Router V4,我正在为react-router-v4使用react-loadable,我想进行服务器端渲染。 当然,在服务器端,我不需要延迟加载,所以我开始使用react-loadable,因为它说可以在import-inspectorbabel插件的帮助下与服务器一起使用 但不幸的是,我的服务器控制台require.sure不是一个函数,这导致在客户端重新渲染,我正在失去服务器端渲染的所有好处 在此之前,我一直使用react-router-v3,并将getComponent与import一起使用,没有任何问
react-router-v4
使用react-loadable
,我想进行服务器端渲染。
当然,在服务器端,我不需要延迟加载,所以我开始使用react-loadable
,因为它说可以在import-inspector
babel插件的帮助下与服务器一起使用
但不幸的是,我的服务器控制台require.sure不是一个函数
,这导致在客户端重新渲染,我正在失去服务器端渲染的所有好处
在此之前,我一直使用react-router-v3
,并将getComponent
与import
一起使用,没有任何问题
这是我的路线配置
export default [
{
component: Root,
routes: [
{
path: '/',
component: Loadable({
loader: () => import('./Parent.jsx'),
loading: () => <div>Loading...</div>
}),
routes: [
{
path: '/',
exact: true,
component: Loadable({
loader: () => import('./Child.jsx'),
loading: () => <div>Loading...</div>
})
}
]
}
]
}
];
在客户端上,它工作得很好,唯一的错误是标记校验和差分错误。
这是怎么回事
提前谢谢 尝试将此添加到babel或babel loader “动态导入节点” 那是airbnb的
{
presets : [["es2015", {modules: false}], "react", "stage-2", "stage-3"],
plugins: [
"transform-runtime",
"syntax-async-functions",
"dynamic-import-webpack"
],
env: {
node: {
plugins: [
["import-inspector", {
"serverSideRequirePath": true,
"webpackRequireWeakId": true,
}],
["babel-plugin-webpack-alias", {
"config": "webpack/server.js",
"findConfig": true
}]
]
}
}
}