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

Question

[我基本上是想将主应用程序的某些部分提取到一个单独的包中进行poc。我已经在git repo myapp-poc-ui中构建了一个示例单独的包。

现在我正在尝试在我的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时出现此问题。

我猜测webpack config file publicPath property中的myapp-poc-ui出了问题

也欢迎任何设计变更建议。

提前感谢。

Answer 1

这就是问题所在，每当myapp-poc-ui生成时，它都会创建

1. 主入口文件
2. 其余都是块文件

除非应用渲染，否则块文件不会自动在构建中加载。应用呈现后，它会调用块文件通过网络加载。您的客户端应用程序需要将该块文件放在本地服务器上的public或dist文件夹中，除非我们将其从节点模块复制到公共目录，否则它无法自动获取该块文件。

您的模块已经创建了块，但是客户端应用程序在创建客户端的内部版本时不会自动加载/复制文件，如果我们将文件作为myapp-poc-ui的一部分进行调用，那么它将无法达到使用Lazy的目的-加载中。因此，一种方法是将节点文件复制到服务的文件夹或构建文件夹中。

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

快乐编码：）