React Uncaught ReferenceError：进程未定义？

Question

我的应用程序在react.ts中包含.env文件来存储带有机密数据的变量。但是使用的时候process.env.REACT_APP_CLIENT_ID控制台出现错误。

未捕获的引用错误：进程未定义

怎么解决？请帮帮我。

.env 文件

REACT_APP_CLIENT_ID = ed75ba30-1810

authConfig.tsx 文件

export const msalConfig: Configuration = {
auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    authority: "https://login.microsoftonline.com,
},

Answer 1

Vite 不像 Node.js 那样提供内置的流程变量。Vite 专为前端开发而设计，不包含类似 Node.js 的全局对象。

要访问 Vite 中的环境变量，可以使用import.meta.env对象。该对象允许您访问 Vite 项目中定义的环境变量。

在您的示例中，重命名 env 文件中的变量，如下所示：

来自：REACT_APP_CLIENT_ID = ed75ba30-1810

至：VITE_REACT_APP_CLIENT_ID = ed75ba30-1810

使用 Vite 时，请确保在环境变量中添加 VITE_ 前缀，因为它会自动公开以该前缀开头的变量。

您的 authConfig 文件应该是：

export const msalConfig: Configuration = {
auth: {
    clientId: import.meta.env.VITE_REACT_APP_CLIENT_ID,
    authority: "https://login.microsoftonline.com,
},

基本上用 import.meta.env 替换 process.env

效果非常好。

Answer 2

我正在使用 vite React，在搜索我已经完成的所有内容后，我得到了同样的错误，但流程仍然没有定义。

所以我在 vite.config.js 文件中定义了它

定义：{'process.env'：{}}

Answer 3

尝试使用npm run start否则这应该适合您： https: //stackoverflow.com/a/49579700/9464846 它始终是一个配置问题。