执行npm run build编译失败，报错Cannot read properties of undefined(includes)求助

问题描述 #

完成项目开发后执行npm run build构建生产版本时失败，报错信息如下：

npm run build

> pcrf-portal@0.1.0 build
> react-scripts build

Creating an optimized production build...
Failed to compile.

Cannot read properties of undefined (reading 'includes')

已检查代码中所有显式使用includes的位置，未发现明显错误，需要解决该问题以完成生产构建。

排查与解决步骤 #

• 注意开发与生产环境的差异：开发环境（npm start）正常但生产构建失败，通常是因为生产构建会做更严格的代码校验、压缩和优化，一些在开发模式下被忽略的隐性问题（比如未初始化的变量）会被触发。
• 精准定位报错位置：
  1. 执行npm run build --verbose，获取详细的报错堆栈信息，能直接定位到出错的文件和代码行。
  2. 如果堆栈信息不够清晰，可以临时禁用生产构建的代码压缩（可通过craco或react-app-rewired修改配置），构建后查看未压缩的代码，更容易找到问题点。
• 常见问题修复：
  • 变量未初始化就调用includes：这是最常见的原因，比如某个状态、接口返回字段在初始渲染或生产环境中为undefined，但代码直接调用了includes方法。
    错误示例：

    {user.roles.includes('admin') && <AdminPanel />}
    

    修复方式：添加空值判断（可选链操作符）

    {user?.roles?.includes('admin') && <AdminPanel />}
    

  • 环境数据不一致：生产环境接口返回的字段可能与开发环境不同（比如某个字段缺失），导致后续调用includes出错。建议在数据请求后添加字段校验，确保必要数据存在后再进行后续操作。
  • 第三方依赖问题：如果报错来自第三方依赖，尝试更新或回退相关依赖包，查看该依赖的官方issue是否有类似问题的解决方案。
• 临时调试方法：在所有使用includes的代码前，添加日志打印变量值，确认变量是否为undefined，快速定位问题：

  console.log('待检查变量:', targetVariable);
  targetVariable?.includes('xxx')
  

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