react项目启动报错:Uncaught TypeError: Cannot read property ‘forEach‘ of undefined

待我称王封你为后i 2023-01-04 14:51 129阅读 0赞

如题，react项目启动报错，具体信息，如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70][]

这个问题是因为浏览器安装了react-devtools扩展程序导致的，很多人的解决办法就是直接禁用react-devtools，我觉着也还行吧，但是就是感觉不是很好，我们安装这个玩意不就是为了方便查看react元素与编译之后的代码的么？这种办法似乎有点壮士断腕，我直接不用你了。

我个人根据报错堆栈信息，找到node\_modules/@pmmmwh/react-refresh-webpack-plugin/client/ReactRefreshEntry.js这个文件，找到报错的代码，直接注释导致报错的那一行：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1][]

这样，重新启动项目，浏览器正确加载项目，没有报错信息，而且react-devtools插件也正常加载，good job：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2][]

这个报错，也是跟react版本有很大关系，记得老得版本好像不会出现这个问题。这种办法也没有从根本上解决这个问题，如果是新的项目，或者重新安装一下依赖，还是需要手动修改代码。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70]: /images/20221119/6292d92466b743c6b10643bbb997325b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210110223739662.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/2021011022553732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2ZlaW5pZmk=,size_16,color_FFFFFF,t_70