未处理的拒绝（ChunkLoadError）：加载块1失败

Question

我基本上正在尝试在单独的软件包中提取我的主要应用程序的某些部分，进行一个名为poc的实验。我已经在我的git存储库myapp-poc-ui中构建了一个示例单独软件包。

现在我正在尝试在我的主要应用程序中访问它。
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 文件publicPath 属性 存在问题。

欢迎提出任何设计更改建议。

提前致谢。

- Prabhat Mishra

---

这段代码 export default Loadable({ // loader: () => import(/* webpackChunkName: "ForecastAccuracy" */ './ForecastAccuracy'), loader: () => import('./../LazyComponent/lazyComponent'), loading() { return <div>Loading...</div> } }); 是否正确？ - harisu

传递给Loadable的对象不应该是json格式吗？ - harisu

我假设这是正确的，请参考此链接https://www.npmjs.com/package/react-loadable。 - Prabhat Mishra

我发现react-loadable的API没有明确指定它需要哪些参数。但你可以尝试发送特定的JSON数据，看看是否解决了你的问题。例如：loading: () => <div> Loading ... </div>。 - harisu

不需要修改package.json，因为仓库保持不变。 - Prabhat Mishra

Answer 1

所以问题在于，每当myapp-poc-ui构建时，它会创建一个主入口文件和其他的chunk文件。除非应用程序渲染，否则chunk文件不会自动加载。一旦应用程序渲染完成，它会调用网络上的chunk文件进行加载。你的客户端应用程序需要在公共或dist文件夹中拥有该chunk文件，该文件夹由本地主机提供服务，否则无法自动获取chunk文件，除非我们将其从节点模块复制到公共文件夹中。

你的模块已经创建了chunk文件，但是客户端应用程序在创建客户端构建时不会自动加载/复制该文件。如果我们将文件调用作为myapp-poc-ui的一部分，则会破坏使用Lazy-Loading的目的。因此，一种方法是将节点文件复制到您的服务文件夹或构建文件夹中。

// 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;
}

愉快的编码 :)

- Harsh Mehta