React项目执行npm run build报includes of undefined错误如何排查

报错提示：Cannot read property 'includes' of undefined

你可以按以下步骤逐一排查问题根源：

• 排查依赖完整性与兼容性
  先删除项目根目录下的node_modules文件夹、package-lock.json或yarn.lock文件，重新执行npm install安装依赖，排除依赖下载损坏的问题。同时确认本地Node.js版本符合当前react-scripts的版本要求：比如react-scripts 5.x要求Node版本≥14.0.0，版本不匹配的话先升级Node。
• 验证build脚本配置正确性
  临时修改package.json中的build脚本为"build": "react-scripts build"，去掉cross-env和GENERATE_SOURCEMAP参数后重新执行构建，如果不再报错，说明问题出在配置环节：要么是cross-env未作为开发依赖安装，执行npm i cross-env -D安装即可；要么是环境变量传递逻辑异常，可改为在项目根目录新建.env.production文件，写入GENERATE_SOURCEMAP=false来配置该参数，不需要在脚本中通过cross-env传递。
• 排查业务代码中的错误调用
  该报错的本质是代码中尝试对undefined对象调用includes方法，生产构建的编译逻辑比本地开发更严格，部分开发环境未触发的边界问题会在生产构建时暴露。全局搜索项目代码中所有.includes(的调用，检查调用对象是否存在为undefined的可能，添加兜底逻辑：

  // 错误写法，调用对象arr可能为undefined
  arr.includes('test')
  // 修正写法1：可选链兜底
  arr?.includes('test')
  // 修正写法2：默认值兜底
  (arr || []).includes('test')
  

• 开启调试日志定位具体报错位置
  执行npm run build -- --verbose开启构建详细日志，输出内容会明确标注触发报错的文件路径和代码行数，可直接定位问题代码。

内容的提问来源于stack exchange，提问作者Ulrik Magaña