使用Yarn安装classnames后出现import/no-extraneous-dependencies错误求助

以下是几种实用的排查和解决方法：

• 确认依赖位置：检查你的package.json，确保classnames是在dependencies字段下，而不是devDependencies。ESLint的import/no-extraneous-dependencies规则默认要求生产代码中导入的包必须属于dependencies，如果误放在devDependencies就会触发报错。

• 清理缓存后重新安装：

  1. 删除本地的node_modules文件夹和yarn.lock锁文件：

     rm -rf node_modules yarn.lock
     

  2. 重新执行安装命令：

     yarn install
     

  这一步可以解决锁文件或本地依赖缓存导致的不一致问题。

• 调整ESLint规则配置：
  如果你的使用场景确实需要从devDependencies导入（比如在测试文件、配置文件中），可以修改ESLint配置文件（.eslintrc/.eslintrc.js等），给规则添加例外：

  module.exports = {
    // 其他配置...
    rules: {
      "import/no-extraneous-dependencies": ["error", {
        // 指定允许使用devDependencies的文件路径
        "devDependencies": ["**/*.test.js", "**/*.spec.js", "**/*.config.js"]
      }]
    }
  }
  

  如果不需要区分环境，也可以暂时放宽规则（不推荐生产环境）：

  "import/no-extraneous-dependencies": "off"
  

• 验证依赖安装状态：执行yarn list classnames查看包的实际安装情况，确认输出中存在该包且版本与package.json中一致，排除安装失败的可能。

• 重启ESLint或编辑器：有时候编辑器的ESLint插件会缓存旧的检查结果，重启编辑器或者手动重启ESLint服务（比如VSCode中通过命令面板执行ESLint: Restart ESLint Server）即可更新检查状态。

• 检查Yarn工作区配置（如有）：如果是monorepo项目，确认classnames是安装在当前子项目的package.json中，而非根目录的依赖，同时检查package.json中的工作区配置是否正确。

内容的提问来源于stack exchange，提问作者Evgeniy S.