React项目本地与GitHub lint配置一致但PR时报TypeError: Cannot read property 'value' of null错误的解决方法

碰到过类似的CI与本地ESLint行为不一致的坑，我来帮你拆解可能的原因和对应的解决办法：

1. 优先排查CI环境的环境变量配置 #

你的代码里用到了process.env.NEXT_PUBLIC_REACT_APP_API_TOKEN，本地你大概率已经在.env文件里配置了这个变量，但GitHub Actions的CI环境不会自动读取本地的.env文件。如果这个变量在CI里未设置，process.env.NEXT_PUBLIC_REACT_APP_API_TOKEN会是undefined，部分ESLint规则（尤其是和环境变量、全局变量相关的规则）在处理这种情况时可能抛出奇怪的Cannot read property 'value' of null错误。

解决步骤：

• 打开GitHub仓库的Settings > Secrets and variables > Actions，添加名为NEXT_PUBLIC_REACT_APP_API_TOKEN的仓库变量，值和本地一致。
• 在你的GitHub Actions workflow文件里，确保lint步骤中注入了这个变量，比如：

  - name: Run ESLint
    env:
      NEXT_PUBLIC_REACT_APP_API_TOKEN: ${{ secrets.NEXT_PUBLIC_REACT_APP_API_TOKEN }}
    run: npm run lint
  

2. 确保CI与本地的依赖、Node版本完全一致 #

即使你同步了ESLint配置文件，如果CI安装的依赖版本（尤其是ESLint核心、插件）和本地不一样，也可能出现规则行为差异。

解决步骤：

• 确认你已经提交了package-lock.json或yarn.lock文件到仓库，避免CI拉取不同版本的依赖。
• 在GitHub Actions workflow里指定和本地相同的Node版本，比如：

  - name: Setup Node.js
    uses: actions/setup-node@v4
    with:
      node-version: 18.x # 替换成你本地使用的Node版本
      cache: 'npm'
  

3. 给代码加上防御性判断 #

即使环境变量配置正确，为了避免运行时和ESLint检查时的潜在问题，建议给代码加个空值判断：

const apiToken = process.env.NEXT_PUBLIC_REACT_APP_API_TOKEN;
if (apiToken) {
  this.axios.defaults.headers.Authorization = `Token ${apiToken}`;
}

这种写法不仅能避免变量为null/undefined时的拼接问题，也能让ESLint的规则更容易解析，减少误报。

4. 禁用ESLint缓存 #

本地的ESLint缓存可能会让某些规则不触发，但CI环境如果是首次构建（或者缓存未命中），就会触发完整检查。可以在lint命令里加上--no-cache参数，强制ESLint重新检查所有文件：
修改package.json里的lint脚本：

{
  "scripts": {
    "lint": "eslint . --no-cache"
  }
}

5. 检查ESLint全局变量配置 #

如果你的ESLint配置里没有声明process是全局变量，部分规则可能会对process.env的访问产生误判。可以在.eslintrc.js里添加：

module.exports = {
  // 其他配置
  globals: {
    process: 'readonly'
  }
};

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