react+dva+antd打包运行，项目时常出现报错：Loading chunk n failed.——求解决

最新推荐文章于 2024-03-18 10:39:05 发布
最新推荐文章于 2024-03-18 10:39:05 发布
阅读量3.2k 收藏
点赞数
分类专栏： web前端 文章标签： react项目打包运行报错没有解决 Loading chunk n failed
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/baidu_41604826/article/details/102461035
版权

react+dva+antd ,webpack打包后运行，项目时常出现报错：Loading chunk n failed.

表现的形式:页面空白，控制栏报错如下：除非强制刷新页面才可以正常展示。不是每个页面都会出现，偶尔出现
在这里插入图片描述

找遍全网，没有解决【-_-】。有解决的欢迎评赐教哦…

~小仙女~
关注
专栏目录
Loading chunk failed问题处理
hu_baobao的博客
10-16 1万+
import React from 'react' import { observer, inject } from 'mobx-react' import Component from 'edt-components/Component' import { sessionStorage } from 'utils/storage' import FullLoading from 'edt-components/FullLoading' import _ from 'lodash' @observer c.
React 16.x折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势
CRPER
12-21 3367
前言 用的是umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等 umijs类似create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看 声明式的路由(nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi ...
Error: Loading CSS chunk chunk-b0a1 failed. 报错解决
qq_36454619的博客
08-06 6565
问题描述： 部署到服务器上的项目有一个页面进不去（本地可以进）。 浏览器控制台报错如下： 来自“http://XXX.css”的资源已被阻止，因为 MIME 类型（“application/json”）不匹配（X-Content-Type-Options: nosniff）。 Error: Loading CSS chunk chunk-b0a1 failed. (/XXX/static/css/chunk-b0a1.XXX.css) 问题排查： 发现该css文件为0kb，怀疑因此加载时产生错误。
Loading chunk * failed错误
最新发布
one、two、three，go的博客
03-18 1305
【代码】Loading chunk * failed错误。
ChunkLoadError: Loading chunk {n} failed.
我叫陈小皮。
05-31 4409
偶现路由切换，控制台报错 ChunkLoadError: Loading chunk {n} failed.可能是远程资源更新，浏览器缓存，出现静态资源不一致等原因造成的。
React异步加载组件发布上线后报loading chunk fail错误解决方法
qq_15557771的博客
09-04 7279
项目场景： React技术栈，后台管理界面，使用异步加载组件。 资源结构： 问题描述： 代码打包上线后界面崩溃，报loading chunk failed错误： 原因分析： 根本原因：找不到资源。 具体原因： 1.异步加载组件，资源不会一下子全加载，而是你点到哪个界面就加载那个界面的资源。 2.重新打包后hash值不一样，找不到旧的资源。 解决方案： React16+版本新增了个功能：componentDidCatch，用此方法捕获错误，然后主动刷新界面，这样子浏览器获..
umijs多环境配置_umi3+react+antd pro 多环境打包配置【方法一】
weixin_32251525的博客
12-28 3469
umi3+react+antd pro 在打包时只区分了：本地 + 生产，umi3的package.json scripts 部分如下："scripts": {"analyze": "cross-env ANALYZE=1 umi build","build": "umi build","start": "umi dev","qa": "umi build","start:no-mock": "c...
umi+dva+antd环境开发遇到问题
atubo1234的专栏
07-23 689
import { Effect 等 API } from umi 无效？ [解]umi版本^3.5以上遇到该问题，首先确认三件事： (1)我使用的是.umirc.ts做的配置，在该文件中查找，确认配置中开启了dva，因为dva是手动开启， (2)有没有有效的 dva model，可通过执行 umi dva list model 检查，或者执行 umi g tmp 后查看 src/.umi/plugin-dva/dva.ts 中检查 model 注册情况 (3)tsconfig.json中 path 配置如.
webpack学习之对比 umi 和 create-react-app的打包流程和优化配置
weixin_33801856的博客
03-24 4260
[toc] 对外配置文件对比 umi .umirc.js // ref: https://umijs.org/config/ export default { treeShaking: true, plugins: [ // ref: https://umijs.org/plugin/umi-plugin-react.html ['umi-plugin-react', { ...
二、React进阶
rocktanga的博客
11-16 171
一、代码分割 为什么要使用代码分割：在用webpack进行打包的时候，每个模块被导入合并在一个文件，这个文件叫做 bundle，这些 bundle 在一张页面上包括了整个APP。然而，当 APP 增长的时候，这些 bundle 尺寸开始变得越来越大，因此影响了页面加载时间 使用ant design pro的时候，打包出来的不是一个bundle文件，而是把每个模块打包成了一个async.js。如果用了代码拆分中的import(),就会把对应的js模块单独进行打包，打包出来的js模块名字实例如56.ffe
记一次React项目，奇葩ChunkLoadError问题解决历程
qq_38950073的博客
11-17 759
记一次奇葩问题解决过程，国产操作系统火狐浏览器导致的ChunkLoadError
生产打包报错问题处理
lyd的博客
03-14 396
遇到没有头绪的报错，需要使用排除法一点一点从大范围缩小到小范围，小范围内再进行一点一点的尝试，尝试次数多了总是可以发现问题的关键点。组件的相关代码放到了组件库文件夹中，组件库的打包和项目功能文件打包不一样，因此先把组件相关代码移动到项目中尝试，结果并不能解决。用于将 es5 最终输出 es3 的 webpack 插件，如果项目需要兼容 ie8 会用到它，注释掉这个插件，结果并不能解决。组件，首先进行的是把四个页面的代码注释掉，结果还是有问题；错误，把一些没有添加分号的代码也添加了分号，结果还是出现问题。
Loading chunk {n} failed 解决方法集合
qq_45723621的博客
07-05 4236
在加载网页时遇到了"Loading chunk {n} failed"的错误，这可能是由于以下几个原因之一： 1. 网络连接问题 2. 缓存问题 3. 服务器问题 4.浏览器兼容性问题
react按需加载以及遇到的问题
Juniorselk的博客
12-29 2269
export default function asyncComponent(importComponent){ class AsynccComponent extends React.Component{ constructor(props){ super(props); this.state = { component:null
ant-design-pro react oss发布 单页面版本升级自动刷新更新 解决空白404loading问题
oKeYue的博客
03-23 3509
我们使用的是 ant-design-pro ，每次更新，如果用户不刷新页面的话，始终访问的旧版页面，如果旧版js文件删除，就会出现404问题，如果旧版文件有修改，比如说 旧版js里的接口有变化，就会出现错误，也可能会出现一直loading的问题。
react项目打包 npm run build后资源路径找不到，放在服务器二级子目录空白问题解决方法。部署后刷新404问题
qq_42780323的博客
11-08 8526
1.项目完成后直接npm run build 后发现资源找不到，chunk.css,js等全部是报错。 解决办法，在page.json文件里面增加一行："homepage": "./", 2.由于项目不是直接放在服务器根目录，放在二级子目录，导致路由无法匹配。指向错误页面。或者空白。 解决方法： react路由使用BrowserRouter ,里面增加一个属性basename，相当于基准url。不是默认的根路径 我的文件位置/WEB/reactdemo, :打开页面浏览器显示的地址：htt.
页面无法访问vue-router.esm.js:2314 Error: Loading CSS chunk (filename) failed.页面跳转失败
SHERLOCK_96的博客
11-10 612
页面无法访问vue-router.esm.js:2314 Error: Loading CSS chunk (filename) failed.页面跳转失败
React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势
weixin_34380948的博客
12-21 930
前言 用的是umi 2.x ,写起来挺舒服;顺带完善了上一版本后台的一些细节问题,功能等 umijs类似create-react-app, 也是一套方案的集合体,亮点很多.可以具体官网去看 声明式的路由(nuxtjs既视感) dva(基于redux+redux-saga的封装方案):写起来有vuex的感觉; 主要记录我在过程中遇到的问题及解决的姿势,技术栈 antd 3.11.x + umi ...
Loading chunk {n} failed 的解决方法
热门推荐
weixin_42333548的博客
04-19 1万+
背景: 前端代码更改后,每次发布到测试环境,用户的页面如果不刷新,会读取缓存,导致页面白掉! 本地没有过，都是打包到服务器上才有 error info Uncaught SyntaxError: Unexpected token '<' Uncaught ChunkLoadError: Loading chunk 8 failed. (missing: https://mispaceuat.mihoyo.com/static/js/8.98f2a71fc60af3a81dd1.js)
React + Umi + Dva + Antd
12-15
React + Umi + Dva + Antd 是一种常用的前端技术栈，其中： React 是一个用于构建用户界面的 JavaScript 库，提供了高效、灵活且可重用的组件。 Umi 是一个可插拔的企业级 React 应用框架，提供了类 Next.js 的约定式路由、插件化的配置、插件集成的方式等。 Dva 是一个基于 Redux 和 Redux-saga 的数据流方案，提供了简化开发体验的额外内置功能，例如 react-router 和 fetch。 Antd 是一个基于 React 的 UI 组件库，提供了丰富的组件和样式，可以帮助开发者快速构建美观且易于维护的用户界面。 以下是一个使用 React + Umi + Dva + Antd 的示例代码： ```javascript import React from 'react'; import { connect } from 'dva'; import { Button } from 'antd'; const ExamplePage = ({ dispatch, count }) => { const handleClick = () => { dispatch({ type: 'example/addCount', }); }; return ( <div> <h1>Count: {count}</h1> <<Button onClick={handleClick}>Add</Button> </div> ); }; export default connect(({ example }) => ({ count: example.count, }))(ExamplePage); ``` 在上面的示例代码中，我们使用了 connect 函数将组件与 Redux store 进行连接，从而可以通过 props 访问 store 中的数据和 dispatch 函数。同时，我们还使用了 Antd 提供的 Button 组件来渲染一个按钮。当用户点击按钮时，我们会触发一个名为 addCount 的 action，从而更新 store 中的 count 数据。
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值