React项目运行yarn lint时ESLint报Cannot read property 'name' of undefined错误

云上老周

2026-9-29

问题原因

这个是eslint-plugin-storybook v0.1.x版本的已知兼容bug，你当前配置里将storybook相关规则全局启用，其中prefer-csf规则没有对非story格式的普通ts/tsx文件做容错判断，lint到useFirebase.ts这类普通文件时，规则找不到目标属性就触发了空指针报错。
你在VSCode中聚焦useFirebase.ts时执行yarn start会报错，是因为Create React App的devServer默认会优先校验当前编辑器打开的活跃文件，此时触发了上述bug；聚焦其他文件时校验逻辑没有命中这个规则的崩溃场景，所以可以正常运行。

解决方案

调整ESLint配置，将storybook相关规则限制仅对story文件生效，不要全局启用。修改你的.eslintrc如下：
- 删掉全局plugins数组里的storybook项
- 删掉全局rules里的"storybook/prefer-csf": "error"配置
- 新增overrides配置段，专门匹配story文件时加载对应规则：
```
{
  // 保留你原来的所有配置，新增以下overrides段
  "overrides": [
    {
      "files": ["**/*.stories.*"],
      "plugins": ["storybook"],
      "rules": {
        "storybook/prefer-csf": "error"
      }
    }
  ]
}
```
建议将eslint-plugin-storybook升级到最新正式版，该版本已经修复了这个空指针崩溃问题，执行命令：
```
yarn add eslint-plugin-storybook@latest --dev
```