无法访问环境变量 react / supabase答案

【问题标题】：Cannot access env variables react / supabase无法访问环境变量 react / supabase
【发布时间】：2023-01-08 23:10:39
【问题描述】：

我正在创建一个 React 应用程序和 Supabase。不幸的是，我收到错误：

“SupabaseClient.ts:87 未捕获错误：需要 supabaseUrl。”

当我将 supabaseURL 放入 database.js 文件时，他会读取它，但由于我还必须保护我的私有 api 密钥，他会提到：

“SupabaseClient.ts:87 未捕获错误：需要 supabaseKey。”

不知何故，他没有阅读 .env 或 .env.local 文件。

在下面检查我的代码：

数据库.js： `从'@supabase/supabase-js'导入{createClient}

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL; const supabaseKey = process.env.REACT_APP_SUPABASE_KEY;

export const supabase = createClient(supabaseUrl, supabaseKey)`

.env（或 .local，我都试过了）：

REACT_APP_SUPABASE_URL="myurl" REACT_APP_SUPABASE_KEY="mykey"

试过 .env / env.local

【问题讨论】：

【解决方案1】：

我无法确定问题出在哪里，但您可以查看以下内容以及解决方法

.env 文件是否在正确的目录中？

.env 文件应该在项目的根目录中

dotenv 包可以帮助您从 .env 文件中读取属性，您可以这样做

import dotenv from 'dotenv';
dotenv.config()

然后您可以将 .env 变量与 process.env.{variable name} 一起使用

【讨论】：

【解决方案2】：

你重新加载你的应用程序了吗？

请记住，环境变量是在构建期间嵌入的

【讨论】：

【解决方案3】：

在你的情况下，如果你正在使用 React 并想要访问 .env.local，React 有自己的“dotenv”模块，你不需要导入它，当你放入 .env.local 文件时不要忘记像这样删除字符串引号“”：

在你的 .env.local 文件中

REACT_APP_SUPABASE_URL=myurl 
REACT_APP_SUPABASE_KEY=mykey

而不是像这样用于您的连接

process.env.REACT_APP_SUPABASE_URL
process.env.REACT_APP_SUPABASE_KEY

一旦完成，你需要重新启动你的 React 应用程序。

【讨论】：