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.

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

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

~小仙女~
关注
专栏目录
react-project-boilerplate:我的React项目样板（React + Dva + Antd）
05-16
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录自动格式化代码更改页面<title> 安装依赖项导入组件代码分割添加样式表后处理CSS 添加CSS预处理器...
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.
页面无法访问vue-router.esm.js:2314 Error: Loading CSS chunk (filename) failed.页面跳转失败
SHERLOCK_96的博客
11-10 604
页面无法访问vue-router.esm.js:2314 Error: Loading CSS chunk (filename) failed.页面跳转失败
React 折腾记 - (10) UmiJS 2.x + antd 重写后台管理系统记录的问题及解决姿势
weixin_34380948的博客
12-21 928
前言 用的是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)
Error: Loading CSS chunk chunk-b0a1 failed. 报错解决
qq_36454619的博客
08-06 6558
问题描述： 部署到服务器上的项目有一个页面进不去（本地可以进）。 浏览器控制台报错如下： 来自“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，怀疑因此加载时产生错误。
React异步加载组件发布上线后报loading chunk fail错误解决方法
qq_15557771的博客
09-04 7262
项目场景： React技术栈，后台管理界面，使用异步加载组件。 资源结构： 问题描述： 代码打包上线后界面崩溃，报loading chunk failed错误： 原因分析： 根本原因：找不到资源。 具体原因： 1.异步加载组件，资源不会一下子全加载，而是你点到哪个界面就加载那个界面的资源。 2.重新打包后hash值不一样，找不到旧的资源。 解决方案： React16+版本新增了个功能：componentDidCatch，用此方法捕获错误，然后主动刷新界面，这样子浏览器获..
react PC端项目构建TS，react@18.2.0+antd+vite+axios+redux+sass+ts
03-07
该架构已解决大部分坑，主要用于react@18.2.0PC端，在使用项目前请确保已安装node、yarn工具，node版本18+，此项目构建主要集成：axios、antd、sass、vite、sass、react V18，其中还会介绍到如何跨页面传递数据、...
基于React+TS+Antd+NodeJS+MySQL实现的全栈项目实战【100012591】
06-05
在React项目中使用TypeScript，可以显著提升代码质量和开发体验，避免运行时常见的类型错误。 3. **Ant Design**：Ant Design是一个优秀的React UI组件库，它提供了丰富的预设组件，如按钮、表格、表单等，使得...
基于React+Dva+antd+Express+mongoDB构建的在线问答系统.zip
08-01
基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，适合用作毕业设计、课程设计作业等，项目均经过测试，可快速部署运行！ 基于node.js、vue、mongodb等技术构建的web系统，界面美观，功能齐全，...
线上项目路由跳转报错 Loading chunk failed
yueye_wu的博客
08-18 5302
线上项目路由跳转报错 Loading chunk failed
记一次React项目，奇葩ChunkLoadError问题解决历程
qq_38950073的博客
11-17 747
记一次奇葩问题解决过程，国产操作系统火狐浏览器导致的ChunkLoadError
create-react-app 按需加载antd出错问题解决
nqmysb的博客
01-19 805
按需加载antd的实现方式： 用create-react-app 创建项目后，如果需要第三方的插件库，需要配置wabpack配置文件，   1、首先运行npm run eject或yarn eject暴露出webpack的配置文件： 项目会多出config和scripts文件夹   2、安装完antd和babel-plugin-import后，修改根目录下的package.json b...
Loading chunk * failed错误
最新发布
one、two、three，go的博客
03-18 1272
【代码】Loading chunk * failed错误。
react按需加载以及遇到的问题
Juniorselk的博客
12-29 2266
export default function asyncComponent(importComponent){ class AsynccComponent extends React.Component{ constructor(props){ super(props); this.state = { component:null
生产环境ChunkLoadError: Loading chunk xx failed.报错
wiyon的博客
07-07 1万+
生产环境ChunkLoadError: Loading chunk xx failed.报错
ChunkLoadError:Loading chunk * failed
sunshineTing2的博客
09-15 1万+
使用懒加载之后，可能会造成的问题有，导航点击没用，加载模块出现错误 报错信息 vue-router.esm.js?8c4f:2314 ChunkLoadError: Loading chunk 85 failed. (missing: http://localhost:3001/fail.js) at Function.requireEnsure [as e] (app.js:875) at Function.fn.e (app.js:156) at component (route
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、付费专栏及课程。

余额充值