React项目浏览器控制台报Invalid hook call等错误求助

一、处理「Unchecked runtime.lastError: The message port closed before a response was received.」错误 #

这个错误大多和浏览器扩展冲突有关，解决步骤：

• 禁用所有浏览器扩展，尤其是广告拦截类（如AdBlock）、React DevTools，再重新加载页面测试
• 若禁用后恢复正常，逐一开启扩展排查出冲突的那个，更新或卸载该扩展
• 尝试用浏览器无痕模式打开页面，排除扩展干扰

二、处理「Invalid hook call」及「Cannot read properties of null (reading 'useDebugValue')」错误 #

结合你已确认无多份React副本的情况，从以下方向排查：

1. 检查styled-components与React版本兼容性 #

错误出在<styled.nav>组件，优先排查版本适配问题：

• 确认package.json中styled-components版本是否匹配当前React版本：React 18需搭配styled-components v6及以上，React 17及以下可使用v5
• 若版本不兼容，执行npm install styled-components@适配版本更新依赖

2. 检查组件写法是否违反Hook规则 #

• 确认Navbar是函数组件，而非类组件（类组件内不允许调用Hook）
• 检查NavbarElements中styled组件的定义，确保没有在组件外部（如全局作用域）调用React Hook
• 排查自定义Hook（若有）中useDebugValue的使用：该Hook只能在自定义Hook内部调用，不能直接在组件或普通函数中使用

3. 强制webpack解析统一React副本 #

即使npm ls react显示无多份副本，webpack解析路径仍可能出现异常，在webpack配置文件中添加别名：

module.exports = {
  // 其他配置...
  resolve: {
    alias: {
      'react': path.resolve(__dirname, 'node_modules/react'),
      'react-dom': path.resolve(__dirname, 'node_modules/react-dom')
    }
  }
};

添加后重新执行webpack编译

4. 检查组件导入导出是否正确 #

• 确认NavbarElements中的styled组件是默认导出还是命名导出，Navbar组件中的导入方式是否匹配（默认导出用import NavbarElements from './NavbarElements'，命名导出用import { NavbarElements } from './NavbarElements'）
• 检查App组件中调用Navbar的位置，确保是在函数组件的顶层作用域，没有在条件判断、循环或嵌套函数中调用组件（会导致Hook执行顺序混乱）

5. 清除缓存重新安装依赖 #

• 删除node_modules文件夹和package-lock.json（或yarn.lock）
• 执行npm install重新安装所有依赖
• 清除浏览器缓存后重新加载页面

内容的提问来源于stack exchange，提问作者VOZ ESTOICA