[英]ChunkLoadError: Loading chunk XY failed. - Randomly getting fatal on PRODUCTION
[英]Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed
我基本上是在尝试将我的主要应用程序的某些部分提取到单独的poc
示例单独的 package 我已经在我的ZBA9F11ECC3497D9993B933FDC2BD61E repo 中构建了它。
现在我试图在我的main application.
package.json:
"dependencies": {
"myapp-poc-ui": "git+https://github.com/prabhatmishra33/myapp-poc-ui#master",
"react": "^16.10.1",
"react-dom": "^16.10.1",
"react-scripts": "3.2.0"
},
我正在通过以下方式访问主应用程序中的导出模块:
import React from 'react';
import './App.css';
import { HelloWorld } from "myapp-poc-ui";
import { LazyComponent } from "myapp-poc-ui";
function App() {
return (
<div>
<HelloWorld />
<LazyComponent />
</div>
);
}
export default App;
问题:我的浏览器出现问题
Uncaught SyntaxError: Unexpected token '<'
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.
Hello World
已正确加载,但在加载LazyComponent
时出现此问题。
我猜myapp-poc-ui
的webpack config file publicPath property
有问题
也欢迎任何设计更改建议。
提前致谢。
所以这就是问题所在,每当 myapp-poc-ui 构建时,它都会创建
除非应用程序呈现,否则块文件不会在构建中自动加载。 应用程序渲染后,它会调用块文件通过网络加载。 您的客户端应用程序需要将该块文件放在本地服务器上的公共或 dist 文件夹中,除非我们将其从节点模块复制到公共,否则它无法自动获取块文件。
您的模块已经创建了块,但是客户端应用程序在创建客户端的构建时不会自动加载/复制文件,如果我们将文件作为 myapp-poc-ui 的一部分进行调用,那么它就违背了使用延迟加载的目的. 因此,一种方法是将节点文件复制到您的服务文件夹或构建文件夹中。
// i am using create-react-app as client and used react-app-rewired to // overide cra webpack in config-overrides.js const CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = function override(config, env) { //do stuff with the webpack config... config.plugins = [ new CopyWebpackPlugin([ { context: 'node_modules/myapp-poc-ui/dist/', from: '*', to: '[name].[ext]', toType: 'template', }, ]), ...config.plugins, ]; console.log(config) return config; }
快乐编码:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.