React组件已安装依赖仍无法导入的问题求助

排查及修复步骤 #

• 修复package.json语法错误
  你提供的dependencies片段存在语法缺失："react-hook-form": "^7.43.0"末尾缺少闭合的}（如果是依赖列表的结尾）或逗号（如果后续还有其他依赖）。JSON格式语法严格，任何格式错误都会导致工具无法正确解析依赖列表，先修正这个问题，确保整个package.json结构合法。

• 检查ESLint配置（若项目使用ESLint）
  这类提示常来自ESLint的import/no-extraneous-dependencies规则误判：

  • 打开.eslintrc或相关配置文件，确认规则设置中允许读取当前目录的dependencies；
  • 可添加规则例外：

    "import/no-extraneous-dependencies": ["error", {
      "packageDir": "./",
      "dependencies": true
    }]
    

  • 或临时在组件文件顶部添加忽略注释：

    // eslint-disable-next-line import/no-extraneous-dependencies
    import PropTypes from 'prop-types';
    // eslint-disable-next-line import/no-extraneous-dependencies
    import { useForm } from 'react-hook-form';
    

• 清理缓存并重装依赖
  执行以下命令彻底清理缓存和依赖文件后重装：

  npm cache clean --force
  rm -rf node_modules package-lock.json
  npm install
  

• 确认目录结构匹配
  确保组件文件与package.json处于同一项目根目录下，若为monorepo结构，需确认workspace配置正确，依赖已安装在对应子包的dependencies中。

• 重启开发环境
  IDE或开发服务器的缓存可能导致提示未更新，重启编辑器（如VS Code）和开发服务（npm start），让工具重新读取依赖配置。

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