[英]react-loadable and server side rendering with webpack 3
我正在為react-router-v4
使用react-loadable
,我想做服務器端渲染。 當然,在服務器端,我不需要延遲加載,所以我開始使用react-loadable
,因為它表示可以在import-inspector
babel插件的幫助下與服務器一起使用。
但是不幸的是,我的服務器控制台require.ensure is not a function
出現錯誤,這require.ensure is not a function
,這導致了客戶端的重新渲染,並且我失去了服務器端渲染的所有好處。
在我使用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>
})
}
]
}
]
}
];
這是我的.babelrc
{
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
}]
]
}
}
}
在客戶端上,它可以完美運行,唯一的錯誤是標記校驗和差異錯誤。 這應該如何工作?
提前致謝!
嘗試將其添加到babel或babel加載程序
“動態導入節點”,
那是來自airbnb
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.