未处理的拒绝 (ChunkLoadError)：加载块 1 失败答案

【问题标题】：Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed未处理的拒绝 (ChunkLoadError)：加载块 1 失败
【发布时间】：2019-10-06 10:53:02
【问题描述】：

我基本上是在尝试 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 有问题

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

提前致谢。

【问题讨论】：

export default Loadable({ // loader: () => import(/* webpackChunkName: "ForecastAccuracy" */ './ForecastAccuracy'), loader: () => import('./../LazyComponent/lazyComponent'), loading() { return <div>Loading...</div> } }); 你的这部分代码正确吗？
传递给Loadable的对象不应该是json格式吗？
我认为这是正确的请参考npmjs.com/package/react-loadable
我看到 react-loadable 的 api 没有明确指定它需要什么参数。但是您也应该尝试发送特定的json，看看它是否能解决您的问题。类似loading: () => <div> Loading ... </div>
好的！我做了更改，但同样的错误发生在Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed. (missing: http://localhost:3000/1.myapp-poc-ui.js)

标签： reactjs webpack webpack-dev-server git-submodules react-loadable

【解决方案1】：

所以问题来了，每当 myapp-poc-ui 构建时，它就会创建

主入口文件
其余都是块文件

除非应用呈现，否则块文件不会在构建中自动加载。应用程序渲染后，它会调用块文件通过网络加载。您的客户端应用程序需要将该块文件放在本地服务器上的 public 或 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;
}

快乐编码:)

【讨论】：