Vite + React + Typescript构建项目导致的react-refresh错误

最新推荐文章于 2025-05-12 09:30:00 发布
原创 最新推荐文章于 2025-05-12 09:30:00 发布 · 992 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #typescript #javascript

低版本React-DevTools导致react-refresh-webpack-plugin报错，关闭DevTools后代码运行正常。为解决问题，建议升级React-DevTools到最新版。参考官方issue #333获取更多详情。

在这里插入图片描述
原因是：低版本的React-DevTools会引发react-refresh-webpack-plugin报错。
关闭react-devtools之后，代码正常运行。
可以升级react-devtools版本

参考：https://github.com/pmmmwh/react-refresh-webpack-plugin/issues/333

FWodong
关注
react18 + vite5 + typeScript + commitLint + prettier + eslint + husky + lintStaged 实现后台管理系统基本框架
小白小白从不日别的博客
06-04 849
npm run eject：项目中的一些配置被隐藏起来了，通过这个命令可以将配置文件反编译到项目中，从而获得配置的权利，这个操作是不可逆的，一旦编译出来就无法编译回去，一般来说不会执行这个命令，我们会通过其他方式去修改配置。：React18 引入了并发模式，Zustand 设计为响应式的状态管理库，可以很好地兼容 React18 的并发特性，确保应用的状态管理在并发模式下仍然稳定和高效。：Zustand 采用了最小的 re-render 策略，只会在状态实际变化时触发组件重新渲染，避免了不必要的性能开销。
react react18+vite+typeScript+eslint+prettier+husky+lint-staged+commitlint 快速搭建项目环境
小白小白从不日别的博客
09-18 2137
每次看 Github 仓库的时候，总感觉有些不顺眼。原来是提交附带的信息乱糟糟的，都是"新增xx功能"，"修复xxBUG"，非常的不工整，看着太不舒服啦🤯。不要慌，我们可以使用 CommitLint 对提交的信息进行规范。在 package.json 里增加以下配置},在项目根目录下新建以下配置文件types: [{ value: "feat", name: "✨ feat: 一个新的特性" },{ value: "fix", name: "🐛 fix: 修复一个Bug" },
react报错@react-refresh
Youxingfang的博客
05-18 1174
原因：suspended=>当网速慢时，指定路由组件页面未加载出，则需使用suspense中的fallback在指定页面出现前，加载fallback中的内容。
解决eslint检查报Definition for rule 'vue/component-definition-name-casing' was not found
热门推荐
段郎的博客
03-19 2万+
在使用eslint检查使用vue-property-decorator来辅助编写typescript的时候，出现了一个问题：如下 1:1 error Definition for rule 'vue/component-definition-name-casing' was not found vue/component-definition-name-casing 1:1 ...
React、ts、Ant Design、node、koa 团队项目开发记录（开发环境：windows10、vscode）
huaqi_的博客
02-06 1159
文章目录prettier 格式化 jsx 代码中引号为单引号项目报错: “../react-dom/index.d.ts”不是模块Definition for rule 'additional-typescript-only-rule' was not found. eslint(additional-typescript-only-rule) 等react-scripts@^5.0.0 下载 @craco/craco@6.4.3 失败无法找到模块“react-router-config”的声明文件crea
React项目 ReactRefreshEntry.js:8 报错 Cannot read property ‘forEach‘ of undefined
yehao_jq的博客
11-21 943
今天用官方yarn create react-app antd-demo创建新项目的时候出现ReactRefreshEntry.js报错，导致页面一直打不开，错误如下 react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined at Object.injectIntoGlobalHook (react-refresh-runtime.developme
vite+ts+react+eslint项目中后台报错：找不到模块“@/xxxx/xxxx”或其相应的类型声明（Failed to resolve import “@/xx/xx“ from...）
zwy0206的博客
08-24 1300
Failed to resolve import "@/xxx/xxx" from "src\containers\Login\index.tsx". Does the file exist?
vite+react+ts+eslint+prettier构建react开发项目
任磊
06-30 2158
vite作为脚手架构建react开发项目，使用eslint进行代码规范，prettier进行代码美化,来构建你的项目
【React】vite + react 项目，进行配置 eslint_vite react eslint
2401_84181108的博客
04-30 1018
no-inner-declarations’: [2, ‘functions’], //禁止在块语句中使用声明（变量或函数）‘no-multiple-empty-lines’: [1, { ‘max’: 2 }], //空行最多不能超过2行。‘array-bracket-spacing’: [2, ‘never’], //是否允许非空数组里面有多余的空格。‘no-dupe-keys’: 2, //在创建对象字面量时不允许键重复 {a:1,a:1}
Vite6+TypeScript+React+ESlint9+Prettier前端项目搭建教程
最新发布
qq_48617322的博客
05-12 1711
很多小伙伴苦于无法搭建一个规范的前端项目，导致后续开发不规范，今天给大家带来一个基于Vite6+TypeScript+React+ESlint9+Prettier的搭建教程
vite-plugin-react:Vite的React快速刷新插件
04-13
vite-plugin-react 为Vite提供React快速刷新支持。 默认情况下，此插件包含在 React模板中。 // vite.config.js module . exports = { jsx : 'react' , plugins : [ require ( 'vite-plugin-react' ) ] }
使用 react 脚手架启动项目时报错
weixin_51409195的博客
10-07 296
devtools来方便查看react dom，这两个版本不匹配。本地使用的是v3版本的react-devtools,应匹配 v4 版本。于是在扩展程序中卸载，并重新安装 v4版的react-devtools即可使用。使用 react 脚手架启动项目时报错：react-refresh-runtime.development.js。原因是脚手架的版本为"react": "^17.0.1",在开发环境中使用到。
React v17 热刷新 不起作用
GoldenaArcher的博客
05-15 2963
React v17 热刷新 不起作用 起因是在参加了活动 我的 Serverless 实战 — 使用 formio 快速搭建表单类应用 后想要继续系统性的过一遍 formio 这个工具，突然发现，starter kit 热部署没办法做到自动刷新。 使用的工具是 VSC (Visual Studio Code)，在 Idea 家族里面需要手动勾选热加载什么的，但是 VSC 没有这个情况，所以首先可以排除这个可能性。 接下来，我以为 CRA (create-react-app) 脚手架的热部署没有绑定上，所以想
修复vite中使用react提示Fast refresh only works when a file only exports components.
old brother stable
04-17 3804
我通过 `vite` 构建了一个 `react` 应用并使用 `react.lazy` 来懒加载组件，但是在使用过程中 一直提示 `Fast refresh only works when a file only exports components. Move your component(s) to a separate file.eslint(react-refresh/only-export-components)`。这里简单的记录下问题的修复方式。
react项目部署到服务器，刷新页面报错的两个问题
liang359975715的博客
10-18 1809
前端使用react开发，通过create-react-app搭建react环境，通过npm run build生成的 build目录，使用nginx做为代理服务器。 项目在本地开发时，没有任何问题，部署到服务器上出现了2个问题。 问题一：开发的应用是单页面应用，从主页一步一步点击没有问题，一旦刷新或者直接在地址栏输入，都会出现报错，显示的是404，无法找到页面。 问题二：解决404后，刷新或者直...
推荐一款前端开发者利器：React Refresh Webpack Plugin
gitblog_00081的博客
03-22 1244
推荐一款前端开发者利器：React Refresh Webpack Plugin react-refresh-webpack-pluginA Webpack plugin to enable "Fast Refresh" (also previously known as Hot Reloading) for React components.项目地址:https://gitcode.com/g...
React + TypeScript 全栈开发最佳实践
如沐春风
02-25 1895
（注：实际开发中请以各工具官方文档为准，文中代码示例均通过TypeScript 5.4验证）node.js和npm的安装请参考。：生产构建时内存溢出。（图片来源：搜索结果。
创建react项目并启动出现的报错解决，学习资源
小白目的博客
02-18 7572
一、预备知识：npm或yarn 二、创建项目步骤： 1.全局安装： npm install -g create-react-app 2.切换到想创建项目的目录（hello-react）：create-react-app hello-react 3.进入项目文件夹：cd hello-react 4.启动项目：npm start 三、可能出现的报错： 1. 'react-app-rewired' 不是内部或外部命令，也不是可运行的程序或批处理文件。 原因：可能是由于create-re.
Typescript基本语法以及React中基本使用
你华还是你华
04-23 3040
本文目录一、react中基于Typescript项目创建1.1 ts介绍1.2 安装基于ts的react项目二、typescript基础语法2.1 字符串、数字、布尔2.2 数组2.3 对象2.4 函数2.5 类 一、react中基于Typescript项目创建 1.1 ts介绍 1、Typescript的定位是静态类型语言，在写代码阶段就能检查错误，而非运行阶段。 2、类型系统是最好的文档，增加了代码的可读性和维护性。 3、有一定的学习成本，需要理解接口（interfaces）、泛型（Generics）
基于Vite构建的React路由项目模板
该文件名为“ErickKS_vite-react-router_1744170364.zip”的压缩包，从其标题、描述以及标签信息可以判断，这是一个基于现代前端开发技术栈构建的项目模板，核心围绕 Vite 构建工具与 React 框架，并结合了路由系统...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值