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

Question

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

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

REACT_APP_OTHER_OTHER_THING=asdfas

打开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"))

然后我重新构建了应用程序并启动了应用程序以查看结果但随后它给出 undefined 作为 process.env.REACT_APP_OTHER_OTHER_THING 的输出。然后我尝试打印 process.env.NODE_ENV （正在工作并打印 "development" 作为输出）。

注意：我也尝试过添加临时变量，正如文档在 https://create-react-app.dev/docs/adding-custom-environment-variables >> 重建服务器和运行 ($env: REACT_APP_OTHER_OTHER_THING= "abcdef") -and (npm start) << 由于我运行在 powershell 上使用它仍然给出未定义的输出。

我能做些什么吗？谢谢

Answer 1

无法发表评论，所以我会post回答，抱歉。

你确定 ($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。

正如文档所说：

You cannot override NODE_ENV manually. This prevents developers from accidentally deploying a slow development build to production.

Answer 2

好的，我遇到的问题似乎是我在 React 应用程序中制作的 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

确保它有正确的目录树

D:\your-react-project\.env

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

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

Answer 4

这对我有同样的问题。我 double-checked 一切都已正确连接，然后在启动备份后在终端中杀死了我的服务器并且工作正常。

Answer 5

在比 op 的 Webpack 配置问题简单得多的层面上导致未定义环境变量的其他原因包括：

省略 process.env.REACT_APP_SERVER_URL，只在代码中写入 REACT_APP_SERVER_URL
忘记将环境变量命名为 REACT_APP 作为字符串的第一部分

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

.env variable returns undefined in React JS app

javascript

reactjs

powershell

environment-variables

dotenv

D:\your-react-project\.env