Heroku 配置变量在生产中返回未定义

Question

我有一个使用 .env 文件在本地运行良好的应用程序。但是，当我将变量添加到 Heroku as described in the heroku CRA buildpack

但是当我运行我的应用程序时，我得到一个 undefined 值。

如何确保值正确填充？

这是我在我的应用程序中进行的示例调用：

const xApiKeyHeader = { "x-api-key": process.env.REACT_APP_X_API_KEY };

const filteredProfiles = await fetch(
  `${config.url}/profile/filteredProfiles`,
  {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
      ...xApiKeyHeader,
    },
    body: JSON.stringify({
      ...this.props.filter,
      profession: this.state.professionValues,
    }),
  }
).then(...

Answer 1

答案：

将其添加到我的 webpack 配置中（在此线程 heroku environment variables return undefined 中建议）：

new webpack.DefinePlugin(({           
    'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),      
    'process.env.REACT_APP_X_API_KEY': JSON.stringify(process.env.REACT_APP_X_API_KEY)
  })),

并在 heroku 配置变量中将 NODE_ENV 设置为 true。

Heroku 配置变量在生产中返回未定义

Heroku config vars returning undefined in production

reactjs

heroku

environment-variables

cross-domain

create-react-app