执行npm run dev时出现React useCallback导入错误求解决

可能的原因及修复步骤 #

1. 检查React版本兼容性 #

useCallback是React 16.8版本才引入的Hook，如果你的React版本低于这个版本，会直接触发该错误。

• 查看当前React版本：

  npm list react react-dom
  

• 版本过低则升级到稳定最新版：

  npm install react@latest react-dom@latest
  

2. 清理依赖缓存并重装 #

依赖缓存损坏可能导致模块解析异常：

• 删除依赖目录与锁文件：

  rm -rf node_modules package-lock.json yarn.lock
  

• 重新安装所有依赖：

  npm install
  

3. 排查React重复安装问题 #

项目中存在多个React实例时，会导致导出的Hook无法被正确识别：

• 检查项目中React的安装情况：

  npm ls react
  

• 若发现多版本React，手动清理多余实例，或调整依赖结构确保全局仅存在一个React版本。

4. 升级@radix-ui/react-compose-refs包 #

部分旧版本的Radix UI包可能存在兼容问题，尝试升级到最新版：

npm install @radix-ui/react-compose-refs@latest

5. 检查Babel配置（自定义配置场景） #

如果项目使用自定义Babel配置，需确保React预设正确配置：

• 确认@babel/preset-react已安装，并在配置文件（babel.config.js/.babelrc）中添加：

  {
    "presets": ["@babel/preset-react"]
  }
  

内容的提问来源于stack exchange，提问作者Albert Mathew