为什么我的Env变量显示为未定义?
我正在尝试从 supabase 的表中获取数据。当我尝试将URL和键存储在.env文件上时,它会返回不确定。
文件:app.js
import React, { useEffect } from "react";
import ButtonsSection from "./ButtonsSection";
import Header from "./Header";
import InputsSection from "./InputsSection";
import ResultsSection from "./ResultsSection";
export default function App() {
useEffect(() => {
console.log(process.env.REACT_APP_SUPABASE_URL);
}, []);
return (
<div>
<Header />
<InputsSection />
<ButtonsSection />
<ResultsSection />
</div>
);
}
文件:database.env
REACT_APP_SUPABASE_URL='https://**********.supabase.co'
REACT_APP_SUPABASE_ANON_KEY='***************.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2bW56a2xka25hZG1wcmZtc3JqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTU0MDQ4NDQsImV4cCI6MTk3MDk4MDg0NH0.Th_x*******************************'
I'm trying to get data from a table with Supabase. When I try store the URL and the Key on a .env file it comes back as undefined.
File: App.js
import React, { useEffect } from "react";
import ButtonsSection from "./ButtonsSection";
import Header from "./Header";
import InputsSection from "./InputsSection";
import ResultsSection from "./ResultsSection";
export default function App() {
useEffect(() => {
console.log(process.env.REACT_APP_SUPABASE_URL);
}, []);
return (
<div>
<Header />
<InputsSection />
<ButtonsSection />
<ResultsSection />
</div>
);
}
File: Database.env
REACT_APP_SUPABASE_URL='https://**********.supabase.co'
REACT_APP_SUPABASE_ANON_KEY='***************.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6InF2bW56a2xka25hZG1wcmZtc3JqIiwicm9sZSI6ImFub24iLCJpYXQiOjE2NTU0MDQ4NDQsImV4cCI6MTk3MDk4MDg0NH0.Th_x*******************************'
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
假设您正在使用Create-React-App。
文件名应该为“ .env”而不是“ database.env”
它应该在项目的根文件夹中。
assuming you are using create-react-app.
File name should be ".env" not "Database.env"
and it should be in the root folder of the project.
npm install dotenv
.env
.env 在root Directory问题在您的情况下似乎是您不是在导入
dotenv/config
,而您的文件名是数据库。ENV,只需将其命名为.env
npm install dotenv
.env
extension in the root directorythe problem in your case seems to be that you are not importing
dotenv/config
and your file name is database.env which is not correct, just name it as.env
我遇到了一个非常相似的问题。我的修复程序是将next_public_添加到.env文件和.env中的createClient()中的变量的开头
:
in createClient()中
I was running into a very similar problem getting my Next.js React app to see my Supabase URL and KEY in my .env file. My fix was to add NEXT_PUBLIC_ to the beginning of the variables in the .env file and in CreateClient()
In .env:
In the CreateClient()