Heroku环境下React应用区分生产/开发环境及模块找不到问题

问题根源 #

你碰到的这个错误，核心原因是React的打包工具（webpack）会静态分析所有代码——哪怕你写了if (process.env.NODE_ENV === 'production')的判断，它在构建阶段还是会尝试解析所有require的文件。因为你没把keys_dev.js传到Heroku，所以构建时就会提示找不到这个文件，跟你手动设置NODE_ENV无关。

解决方案 #

方案1：改用环境变量直接注入（推荐）

放弃分keys_prod.js和keys_dev.js的写法，直接在keys.js里读取带REACT_APP_前缀的环境变量：

module.exports = {
  apiKey: process.env.REACT_APP_API_KEY,
  authDomain: process.env.REACT_APP_AUTH_DOMAIN,
  // 其他需要的配置项
};

• 本地开发时，在项目根目录创建.env.development文件，写入开发环境的变量：

  REACT_APP_API_KEY=你的开发环境API密钥
  REACT_APP_AUTH_DOMAIN=你的开发环境域名
  

• Heroku上直接在「设置」-「配置变量」里添加对应的生产环境变量（比如REACT_APP_API_KEY），create-react-app会自动在构建时把这些变量注入到代码里。

这种方法不需要判断环境，也不用维护两个配置文件，完全规避了文件缺失的问题。

方案2：保留文件结构的临时解决

如果你一定要保留原来的文件结构，可以在Heroku的构建环境中添加一个空的keys_dev.js占位符：

1. 在本地创建一个空的keys_dev.js（或者只导出空对象），然后把它从.gitignore里移除，推送到Heroku。
2. 这样webpack构建时能找到这个文件，而生产环境下会加载keys_prod.js，不影响功能。

不过这种方法不如方案1优雅，毕竟多了一个没用的占位文件。

额外注意 #

• Heroku在执行heroku-postbuild时，默认NODE_ENV就是production，所以你手动设置这个变量是多余的。
• 所有需要在React代码中访问的环境变量，必须以REACT_APP_开头，这是create-react-app的硬性要求，你之前的配置是对的。

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