.env 变量在 React JS 应用程序中返回未定义

Question

我正在开发这个 react 应用程序并考虑在其中添加一些环境变量，这就是我所做的：

1. 安装了最新版本的 react-scripts
2. 在根文件夹（与 node_modules 文件夹所在的位置相同）上添加了 .env 文件
3. 添加 REACT_APP_OTHER_OTHER_THING=asdfas 只是为了测试变量

REACT_APP_OTHER_OTHER_THING=asdfas

4. 打开 index.js 和 console.log(process.env.REACT_APP_OTHER_OTHER_THING) 里面查看输出

import React from 'react';
import Reactdom from 'react-dom';
import App from './App';

console.log(process.env.REACT_APP_OTHER_OTHER_THING, 'DOTENV')

Reactdom.render(<App/>, document.getElementById("app"))

然后我重建了应用程序并启动了应用程序以查看结果 但随后它给出未定义作为 process.env.REACT_APP_OTHER_OTHER_THING 的输出。然后我尝试打印 process.env.NODE_ENV （它正在工作并将“开发”打印为输出）。

注意：我还尝试添加临时变量，正如https://create-react-app.dev/docs/adding-custom-environment-variables 中的文档所说的那样 >> 重建服务器并运行 ($env:REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start)

有什么我可以做的吗？ 谢谢你

Answer 1

比操作的 Webpack 配置问题更简单的未定义环境变量的其他原因包括：

• 省略 process.env.REACT_APP_SERVER_URL 并在您的代码中编写 REACT_APP_SERVER_URL

• 忘记用 REACT_APP 作为字符串的第一部分命名环境变量

Answer 2

好吧，我遇到的问题似乎来自我在 React App 中制作的 webpack，

我尝试按照article 的说明进行操作，效果很好！

配置我的 webpack 后，我重新构建它，重新启动服务器，它就可以工作了！

编辑：对于我的解决方案，我添加了：

const dotenv = require('dotenv');

const env = dotenv.config().parsed;

const envKeys = Object.keys(env).reduce((prev, next) => {
    prev[`process.env.${next}`] = JSON.stringify(env[next]);
    return prev; }, {});

在 webpack.common.js 的顶部

还添加了

    plugins: [
        new webpack.DefinePlugin(envKeys), //this line
    ]

在 module.exports 中 在插件中。我希望这有帮助！ :)

Answer 3

这对我有同样的问题。我仔细检查了所有内容都已正确连接，然后在启动它后在终端中终止了我的服务器，它工作正常。

Answer 4

确保目录树正确

D:\your-react-project\.env

• 这里可能是 your-react-project \ .env.development

它应该在默认 README.md 放置的路径中

Answer 5

无法评论，所以我会发布答案，对不起。

你确定($REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start)，因为文档说($env:REACT_APP_NOT_SECRET_CODE = "abcdef") -and (npm start)

我刚刚添加了新的环境变量，它给了我未定义的，但在服务器重新启动后它工作得很好。您可以尝试重新启动服务器，但不是在终端中添加环境变量，而是在 .env 文件中添加环境变量吗？

UPD1： 如您所知，NODE_ENV 由npm start 或npm run build 命令设置，它们分别设置为development 或production。

正如文档所说：

您不能手动覆盖 NODE_ENV。这可以防止开发人员意外地将缓慢的开发版本部署到生产环境。