Heroku部署时Craco构建Create React App出现环境变量undefined问题

craco 完全支持和 react-scripts build 相同的环境变量读取逻辑，默认会自动加载所有带 REACT_APP_ 前缀的系统环境变量，你遇到的读取失败问题是 Heroku 构建阶段的变量传递逻辑导致的，不是 craco 本身不支持。

• 首先确认 Heroku 配置变量的作用域：Heroku 控制台设置的配置变量默认仅会注入到 runtime 运行时环境，不会自动传递到 build 构建阶段的环境，这是绝大多数同类问题的诱因
• 开启 Heroku 构建阶段变量传递：在 Heroku 控制台对应应用的设置页，找到「Config Vars」配置项，新增变量 NPM_CONFIG_PRODUCTION=false，这个配置会禁止npm在构建阶段裁剪devDependencies，同时允许系统环境变量透传到构建子进程
• 检查 craco 配置是否存在变量覆盖逻辑：打开项目根目录的 craco.config.js，确认没有自定义的 webpack 配置用 DefinePlugin 覆盖了 process.env 相关的变量注入规则，如果有自定义注入需求，要保留 react-scripts 默认的 REACT_APP_ 前缀变量读取逻辑，示例正确的自定义注入写法：

// craco.config.js 示例
const webpack = require('webpack')
module.exports = {
  webpack: {
    plugins: [
      new webpack.DefinePlugin({
        // 自定义变量不要覆盖所有process.env，仅新增需要的字段
        'process.env.CUSTOM_VAR': JSON.stringify('xxx')
      })
    ]
  },
  // 保留tailwind配置，不要修改默认的env加载逻辑
  style: {
    postcss: {
      plugins: [require('tailwindcss'), require('autoprefixer')]
    }
  }
}

• 多阶段流水线变量配置方案：如果要区分Heroku流水线的不同阶段（比如 staging、production 环境），不需要依赖NODE_ENV，可以给不同环境的应用分别配置对应需要的REACT_APP_*变量即可，构建阶段会自动读取当前部署应用的配置变量，不需要额外写.env文件。

你可以在client/package.json的build脚本临时修改为：
"build": "env | grep REACT_APP && craco build"
部署后查看构建日志，就能确认构建阶段是否能正确读取到你设置的所有带REACT_APP前缀的变量，如果日志里能打印出对应变量，craco就会自动注入到客户端代码中。

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