未处理的拒绝(ChunkLoadError):加载块 1 失败

2024-04-30

我基本上想做一个poc将我的主应用程序的某些部分提取到一个单独的包中。我已在我的 git 存储库中构建了一个示例单独包myapp-poc-ui https://github.com/prabhatmishra33/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 for myapp-poc-ui

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

提前致谢。


所以问题就在这里, 每当 myapp-poc-ui 构建时,它都会创建

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

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

快乐编码:)

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

未处理的拒绝(ChunkLoadError):加载块 1 失败 的相关文章

随机推荐

  • 如何在 GitHub 页面上添加与 index.md 共享相同主题的新页面?

    目前 我的 GitHub 帐户上有一个主页 https
  • 将树形图导出为 R 中的表格

    我想将 hclust dendrogram 从 R 导出到数据表中 以便随后将其导入到另一个 自制 软件中 str unclass fit 提供了树状图的文本概述 但我正在寻找的实际上是一个数字表 我查看了 Bioconductor ctc
  • “便捷初始化程序缺少对另一个初始化程序的‘自我’调用”

    我正在尝试将我的代码转换为 iOS 8 项目 我需要一些关于如何修复此警告的解释 Convenience initializer missing a self call to another initializer 在此代码上 instan
  • 有没有办法在 Visual Studio 或 MATLAB 中“映射”程序执行顺序?

    我所说的 地图 是指我有一个 主 函数 它调用内部的许多其他程序 我希望能够看到哪个文件首先运行 第二个 第三个等等 基本上 我希望能够请参阅这个大型 OOP 设计程序 创建者没有为其制作 UML 类图 中的依赖项列表和顺序 以帮助破译代码
  • 带 Retrofit 的 JSON 解析

    我最近开始使用Retrofit 我对此了解不多 我用谷歌搜索了这个问题 但没有答案适合我的问题 这是 JSON 响应 results description eng This is second time testing img url t
  • 窗口的打开事件和窗口句柄

    如何从刚刚打开的 Outlook 窗口获取窗口句柄 IntPtr OutLook Items items oFolder Items foreach OutLook MailItem mail in items mail Display I
  • TailwindCSS / PurgeCSS 提取器字符串删除一些类

    对于 Tailwind 和 PostCSS PurgeCSS 来说相当新 所以希望这是一个相当简单的修复 In my tailwind config js 我扩展了一些间距值 包括添加 0 5 值以与默认的 Tailwind 间距比例对齐
  • docker asp.net core 容器在 mysql 容器之后启动

    我有一个带有 asp net core 的 docker 容器和一个带有 mysql 的容器 现在我需要等待 mysql 容器启动并准备好 两个容器都通过 docker compose yml 启动 就像是https github com
  • VSS 的有效绑定根?

    我正在尝试修复我拥有的项目的视觉源安全绑定 当我选择我认为项目应该绑定到的位置时 我会收到一个对话框 其中显示 The folder you chose is not a valid binding root for the project
  • 如何防止文件被直接 URL 访问?

    我正在使用 Apache 并且我的目录中有一个示例 Web 文件夹本地主机 喜欢 http localhost test 文件位于test文件夹 index html sample jpg htaccess 样本来源index html i
  • Angular2 选择 ngValue null

    这就是我想要做的 我想要一个选择列表绑定到具有 ngValue 的对象数组 但第一个选项需要是带有null value Model this managers id null name None id 1 name Jeffrey id 2
  • div 中的内部 html 更改时触发事件

    I have div对于一些信息 填写为 innerHTML单击按钮 目标是我想要 slideDown添加 div 中的文本时的 div 可以用 jQuery 来实现吗 Example div div 将文本添加到 div document
  • Android 表单验证 UI 库

    有iOSUS2表单验证器 https github com ustwo US2FormValidator用于用户输入验证的库 见下图 我认为该库比默认情况下在某些内容未验证时弹出警报更好 我正在寻找如何在 Android 上做这样的事情 有
  • 保护登录和评论表单免受 CSRF 攻击

    我读过很多关于CSRF保护的文章 这个不错 http seclab stanford edu websec csrf csrf pdf 以及关于SO的各种问题 但它们似乎都没有足够的信息来回答我的问题 我正在开发自己的 CMS 我想保护我的
  • 如何检查节点中的req.body是否为空,express?

    下面是我的请求正文 它是从客户端发送的 var credentials ConsumerData ConsumerStoreId a ConsumerUserId a CustomerData CustomerId 2345678890 E
  • ASP.NET 服务器端或客户端的验证控件?

    ASP NET 中的验证控件在服务器端和客户端都有效吗 或者它仅用于客户端验证 Thanks ASP NET 验证控件执行这两项操作client side and server side验证 EnableClientValidation是财
  • 使用 Jinja2 模板在 HTML 文本区域中显示 FastAPI 响应(元组)

    这是我的 FastAPI 后端 main py from typing import Optional from fastapi import FastAPI Request Form from fastapi templating imp
  • 国际天气 API (PHP) [关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找最好的 免费 便宜 国际天气 PHP API 有什么建议么 看看这个答案 https sta
  • 在 C++ 中将 unix 时间戳转换为星期几?

    如何根据任意 Unix 时间戳 秒 确定加利福尼亚州的星期几 太平洋时间 我四处搜寻 但没有找到 C 的内置库 UTC 通常比 PT 早 8 小时 但只需从 Unix 时间戳中减去 8 小时并创建一个tmstruct 不起作用 因为这会折扣
  • 未处理的拒绝(ChunkLoadError):加载块 1 失败

    我基本上想做一个poc将我的主应用程序的某些部分提取到一个单独的包中 我已在我的 git 存储库中构建了一个示例单独包myapp poc ui https github com prabhatmishra33 myapp poc ui 现在