未处理的拒绝(ChunkLoadError):加载块1失败 [英] Unhandled Rejection (ChunkLoadError): Loading chunk 1 failed

问题描述

我基本上是在尝试将主应用程序的某些部分提取到一个单独的包中进行poc.我已经在git repo

I am basically trying to do a poc on extracting the some part of my main application into a separate package.A Sample separate package I have built it in my git repo myapp-poc-ui.

现在我正在尝试在我的main application.
中访问此文件 package.json :

Now I am trying to access this in my 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"
  },

我通过以下方式访问主应用程序中的导出模块:

I am accessing the exported module in my main app by:

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;

问题:我的浏览器出现问题

Issue : I am getting an issue on my browser

Uncaught SyntaxError: Unexpected token '<'
Uncaught (in promise) ChunkLoadError: Loading chunk 1 failed.

Hello World已正确加载，但是在加载LazyComponent时会出现此问题.

Hello World gets loaded properly but this issue comes while loading the LazyComponent.

我猜测webpack config file publicPath property中的myapp-poc-ui

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

Any design change suggestion is also welcome.

谢谢.

推荐答案

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

So here is the problem, whenever myapp-poc-ui builds, it creates

1. 主条目文件
2. 其余都是块文件

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

The chunk file doesn't gets loaded automatically in build unless the app renders. Once app renders, it calls for the chunk file to load over the network. You client app needs to have that chunk file in public or dist folder which is server on localhost, it cannot automatically get the chunk file unless we copy it from node module to the public.

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

Your module has created the chunk but the client app doesn't automatically loads/copies the file while creating the client's build, and if we make the file calling as part of myapp-poc-ui then it defeats the purpose of using Lazy-Loading. So one way to do this is to copy the node file into your served folder or build folder.

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

快乐编码:)

这篇关于未处理的拒绝(ChunkLoadError):加载块1失败的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！