我正在使用React + Typescript和Webpack,我试图在实际需要的时候加载一些react组件。
问题是,当通过延迟加载请求块时,我会收到以下错误:
未捕获的错误:载入区块1失败。(错误:(引导程序:114)。
此区块已成功生成,没有任何错误,只是路径错误-http://localhost:58988/1.chunk.js
,而它应该是http://localhost:58988/dist/1.chunk.js
我也尝试过使用最新的React.lazy
来延迟加载React组件,但是我也遇到了同样的问题。那么,有没有办法告诉编译器如何解析这些文件路径呢?
以下是部分代码:
我的组件.tsx
import * as React from "react";
import * as ES5Promise from "promise";
export class MyComponent extends React.Component<{}, {}> {
constructor(props) {
super(props);
}
private readonly onLoadModuleClickHandler = (): void => {
import("./Button").then((module) => {
console.log(module);
});
}
render() {
return (
<div>
<input type="button" value="Load another module" onClick={this.onLoadModuleClickHandler}/>
</div>
);
}
}
文件系统配置.json
{
"compilerOptions": {
"moduleResolution": "node",
"noImplicitAny": false,
"noEmitOnError": true,
"module": "esnext",
"removeComments": false,
"sourceMap": false,
"target": "es5",
"jsx": "react",
"noEmit": true,
"importHelpers": true,
"lib": ["dom", "es5", "es2015.promise"]
},
"exclude": [
"node_modules",
"wwwroot"
]
}
网页包.配置.js
module.exports = {
entry: {
"app": "./src/App.tsx"
},
output: {
path: path.resolve(__dirname, 'wwwroot/dist'),
filename: "[name].bundle.js",
chunkFilename: "[name].chunk.js"
},
module: {
rules: [
{
test: /\.(ts|tsx)?$/,
use: "awesome-typescript-loader",
exclude: /node_modules/
},
{
test: /\.(css|less)?$/,
use: [{
loader: "style-loader"
}, {
loader: "css-loader?modules&localIdentName=[local]--[hash:base64:5]"
}, {
loader: "less-loader"
}]
},
]
},
resolve: {
extensions: [".js", ".jsx", ".ts", ".tsx", ".css", ".less"]
}
};
9条答案
按热度按时间aydmsdu91#
这是因为
output.publicPath
默认为/
。只需将
output.publicPath
更新到您希望的位置=〉/dist/
。jdzmm42g2#
重新部署时,在重建应用程序捆绑包时,请确保不要清理包含以前的块文件的输出文件夹,因为已加载应用程序的用户将尝试获取不再存在的以前的块文件。
最好的办法是有一个应用程序版本跟踪(* 使用 AJAX 和从数据库或动态配置文件读取 *),当应用程序检测到一个较新的版本,消息用户,并要求他们重新加载页面。
gkl3eglg3#
让我们不要过于关注这个问题。它只发生了5次。我相信有人已经打开了excalidraw一段时间,我们在此期间推出了一个新版本,当他们回来时,他们试图加载一些懒惰的块,它不再存在。
我们在Facebook解决这个问题的方法是,我们将之前的数据块在CDN上保留一周,如果捆绑包超过一周,我们会强制为用户刷新应用程序。这样我们就不需要关心非常旧的版本。
以上回应来自vjeux。
我的计划是监听window.onerror中的错误,然后提示用户刷新浏览器。
dfuffjeb4#
在我的例子中,
window.addEventListener('error'...
没有触发,所以我重写了console.error
方法,如下所示:uz75evzq5#
将
webpack.config.js
中output.publicPath
的值设置为/
将解决此问题。8zzbczxx6#
另一个选项可以简单地使用Magic Comment /* webpackMode:“eager”*/我们希望动态加载的地方。显然,它不获取丢失的块,而是从包中获取。
它确实击败了组块的目的摆在首位,但它解决了问题。
e4eetjau7#
我解决这个问题的方法是将webpack配置中的
output.publicPath
设置为auto
https://webpack.js.org/guides/public-path/#automatic-publicpath
xyhw6mcr8#
你可以试着清空缓存,因为你的浏览器可能没有下载数据块,而是使用了缓存版本的应用程序。
c2e8gylq9#
当你在React.lazy中使用代码拆分时,有时会出现“chunk load error loading chunk 4 failed in react”错误。如果你刷新页面,错误就会消失。如果你按照以下步骤操作,你就不需要手动刷新了。
如果您在app.js中使用以下代码导入页面,则不会发生此错误
将页面导入为