使用npm link调试本地React组件库出现no-unused-expressions错误如何解决

数据老陈

2026-10-1

问题解决方案

核心原因

npm link 生成的软链接会绕过测试项目对 node_modules 依赖的默认忽略规则，导致项目的ESLint校验扫描到组件库的本地开发文件或者未完全转译的打包产物，触发no-unused-expressions语法校验错误。线上安装的npm包默认被ESLint忽略，所以运行正常。

分步解决方案

方案1：在测试项目中忽略组件库的校验规则
在测试项目根目录的.eslintignore文件中添加以下规则，如果没有该文件可直接新建：
```
**/react-library-test/**
**/你的组件库本地开发目录的绝对路径/**
```
如果你使用的是Create React App创建的项目，也可以在package.json中添加ESLint忽略配置：
```
{
  "eslintConfig": {
    "extends": ["react-app"],
    "ignorePatterns": ["**/node_modules/react-library-test/**"]
  }
}
```
方案2：修复组件库的Rollup打包配置
你当前的@rollup/plugin-babel配置默认只处理.js后缀文件，没有覆盖.jsx后缀的组件文件，可能导致本地打包产物残留JSX语法，测试项目无法识别。修改Rollup配置中的babel插件配置：
```
babel({
  exclude: "node_modules/**",
  plugins: ["@babel/transform-runtime"],
  babelHelpers: "runtime",
  extensions: ['.js', '.jsx'] // 新增该行，支持处理jsx文件
})
```
修改后重新执行组件库的npm run build命令，再重新link到测试项目验证。
方案3：简化组件库导出逻辑（可选）
你当前的导出逻辑是通过函数调用返回组件对象，可以简化为直接导出对象，避免转译时出现异常：
```
// 组件库的index.js修改为如下内容
import AwesomeButton from './button.jsx'
export default {
  AwesomeButton
}
```
临时验证方法
你可以直接把组件库本地打包生成的dist文件夹拷贝到测试项目的node_modules/react-library-test目录下，替换原有文件。如果不再报错即可确认是软链接带来的ESLint扫描问题，不需要修改组件库代码。