启用React-devtools后，项目报错

最新推荐文章于 2024-02-27 18:40:40 发布
最新推荐文章于 2024-02-27 18:40:40 发布
阅读量708 收藏
点赞数 2
分类专栏： React 文章标签： react.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lm_choose_live/article/details/120616558
版权

我安装的是 最新版本的 v3 分支上的 react-devtools，根据官方文档一系列操作下来安装好了，然后运行项目报一下错误：
在这里插入图片描述

但是之前项目是正常运行的，于是上网搜索，发现大多数都是说直接禁用掉 react-devtools 这个插件，就无语，那我还安装它干啥？？嫌内存太多？？

于是我又看了眼报错信息，然后根据如下报错信息
在这里插入图片描述
按照它的路径把我项目中对用的这段代码注释掉，然后重新 yarn start，就没有报错了
在这里插入图片描述

网上看了下，说这个是版本的原因，说之前的旧版本没有这个问题。
就酱，拜！

梁什么鸭，
关注
专栏目录
2023年前端面试汇总-React
越陌度阡
06-29 865
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
React项目全球新闻发布管理系统 - 新版问题解决方式整理及部署网站至 Netlify
m0_54849806的博客
03-08 641
整理了一下新版的变化以及遇到的坑的解决办法，最后也会分享将网站及接口部署的方式。 千锋前端-React全家桶_React项目全球新闻发布管理系统 https://www.bilibili.com/video/BV1fw411d7R5 文章目录 P4 P5 P6 P11 P15 P17 P18 P22 P29 P30 P34 P38 P41 P43 P45 P50 P67 进阶: 多语系网站 接口数据 部署网站及接口 P4 反向代理 setupProxy.js 改为： // setupProx
前端开源库-mobx-react-devtools
08-29
前端开源库-mobx-react-devtoolsmobx react dev tools，mobx和react的dev工具
react devtools插件报错处理
zythy的专栏
11-02 764
React的开发者调试工具插件，安装后在Chrome中提示报错： react-refresh-runtime.development.js:465 解决方法： React项目（不是插件文件目录哦）目录下，找到\node_modules\@pmmmwh\react-refresh-webpack-plugin\client目录下的 ReactRefreshEntry.js文件，将此行注释掉即可： //RefreshRuntime.injectIntoGlobalHook(safeThis);
【react devtools】react devtools安装后导致项目报错解决办法
马云
04-25 3442
原文链接：https://www.cnblogs.com/wyq1995/p/14772650.html 安装开发者插件导致报错 解决办法 卸载该插件，重新下载： react devtools下载地址 下载完了之后将crx后缀改为zip，然后将这个zip拖到谷歌浏览器扩展程序那里就行了 ...
react-devTools插件安装导致项目出错
bugBuilder
03-28 980
在node_modules中找到ReactRefreshEntry.js文件(项目报错会映射到这个文件的) 将 RefreshRuntime.injectIntoGlobalHook(safeThis) // 将这段代码注释 并重启项目 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功
react项目与 浏览器扩展权限React Developer Tools冲突问题 项目报错
最新发布
weixin_43836326的博客
02-27 463
2.上面方法不适用，可以打开你的项目，找到所有依赖–node_modules,在此文件夹下找到@pmmmwh/react-refresh-webpack-plugin此文件夹，在文件夹下找到client文件夹并打开，此时会发现一个js文件，文件名为ReactRefreshEntry.js，打开此文件将。经过排查发现是因为浏览器添加了React Developer Tools 扩展权限，由于安装的是3.x的版本，版本与react项目冲突导致。这句话注释掉就可以了。3.安装不会冲突的版本4.x。
react-reduxsaga的Saga监视器和UIdevtool
08-14
然后在项目配置中添加`createStore`时使用`applyMiddleware`方法引入`redux-saga`，并启用devtools。最后，确保在浏览器中启用了Redux Saga Devtools扩展，它会自动连接到你的应用。 5. **配置与自定义**： Redux ...
技本功丨create-react-app升级webpack4填坑
袋鼠云的博客
01-10 1963
都说create-react-app是业界最优秀的 React 应用开发工具之一。But，webpack4都更新到v4.20.2 它居然~还没升级，简直~不能忍 看到webpack这更新速度，本人慌得一批，刚好抽空搭建react-andt-mobx脚手架准备升级~ So，在此分享一下升级攻略，收好不谢！   01 安装 npm install -g create-re...
React Native 性能优化指南【全网最全，值得收藏】
卤蛋实验室
01-09 1556
原文链接：https://juejin.im/post/5e1676e16fb9a04847095b12 2020 年谈 React Native，在日新月异的前端圈，可能算比较另类了。文章动笔之前我也犹豫过，但是想到写技术文章又不是赶时髦，啥新潮写啥，所以还是动笔写了这篇 React Native 性能优化的文章。 本文谈到的 React Native 性能优化，还没到修改 React Nat...
React的浏览器扩展react-devtools.zip
07-19
React Devtools 可以在 Chrome 和 Firefox 开发者工具审查 React 组件的浏览器扩展。 标签：react
React DevTools的浏览器详细安装教程及相关错误修改
享白
01-22 2547
今天分享给大家一个自己制作 React-devtools 小方法，制作完毕可以直接安装到Chrome中使用。 React DevTools安装： Github 地址：react-devtoolsGitHub is where over 73 million developers shape the future of software, together. Contribute to the open source community, manage your Git repositories, rev
react-native项目构建配置及window调试devtools
weixin_33774615的博客
12-03 157
1，安装android-studio，jdk, sdk 配置环境变量，（一定不能配错了，摔太多次） 　　https://www.jianshu.com/p/aaff8bb91f69 　　https://www.jianshu.com/p/2819e3075ab1 　　网上一堆说，配置host文件，安装android-studio的，反正个人体验，不靠谱，（http://www.androi...
react native 调试工具react-devtools
weixin_44753443的博客
05-13 1209
react-native-debugger react native 自带的调试实在是不好用 网上大多数还是苹果手机的调试插件 在bilibili找到了一个 教学视频连接：https://www.bilibili.com/video/BV1mk4y1r7vf?spm_id_from=333.880.my_history.page.click 非常详细非常好 这个视频介绍了4个调试工具 因为我需要写安卓的原生 所以选择了第三个 是用的挺好的 不过视频有点老了 命令下载不推荐了 还是去他的GitHub下载比较
使用react-devtools调试react-native项目
徐同保的专栏
04-07 1599
https://www.npmjs.com/package/react-devtools 安装包： yarn global add react-devtools 通过命令行启动： 可以直接修改app的样式，类似于在chrome中：
蛋疼的react-native与react-devtools
zdluoa的博客
03-29 4730
react-native版本：        react-devtools版本：3.2.1谷歌版本：            这几个版本放在一起就蛋疼了，react-native 始终无法在react-devtools或chrome上进行调试1、在chrome上调试，需要安装react-developer-tools的插件，想要chrome开发者栏中出现react tab            必须...
使用react-devtools后出现Uncaught TypeError: Cannot read property ‘forEach‘ of undefined的解决方法
Leo_xian的博客
01-20 3268
在开发环境，使用到react-devtools来方便查看react dom，按github上react-devtools项目中下载的v3分支代码，一顿操作后运行项目，发现控制台报了react-refresh-runtime.development.js:465 Uncaught TypeError: Cannot read property 'forEach' of undefined 这看的我一脸懵逼啊，各种在网上找解决方法，然鹅，基本都是v3版本的。 经过一番挣扎，终于看到曙光，好家伙，就是版本的问题
React Native遇到的问题
热门推荐
jyt婷的博客
12-29 1万+
1. http://docs.easemob.com/im/react-native/ios-app 按照环信官方文档集成React Native 的时候,如果执行命令时报“CFBundleIdentifier” Does Not Exist这个错误，于是参考官方第4步先配置Xcode。 配置完成之后运行webstorm发现出现如下:error Unable to resolve modu
react-native项目运行出现的问题及解决方法
weixin_45575273的博客
06-08 1063
项目最开始在手机上运行时出现红屏错误提示可以参考官方文档添加链接描述来解决 我的按照官方文档配置了ip和端口号后还是红屏提示，然后我就直接把node_module文件夹删掉了，换成yarn来安装 执行yarn install 出现下面的错误提示Found incompatible module… 在命令行输入 yarn config set ignore-engines true 命令行再次执行yarn install，包安装成功。此时再npm start 和react-native run-andro
下载了react-markdown,项目报错you may need aapprop
03-25
您需要使用webpack来处理React项目中的文件。安装并配置"file-loader"，它可以处理文件并将它们复制到您的构建目录中。您可以在webpack配置中添加以下代码： module: { rules: [ { test: /\.(png|jpe?g|gif)$/i,...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梁什么鸭，

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值