I'm creating a react app and Supabase. Unfortunately, I'm getting the error:

"SupabaseClient.ts:87 Uncaught Error: supabaseUrl is required."

when I put the supabaseURL inside the database.js file, he reads it but because of the fact that I also have to secure my private api key, he will mention:

"SupabaseClient.ts:87 Uncaught Error: supabaseKey is required."

Somehow, he doesn't read the .env or .env.local file.

check my code here below:

Database.js: `import { createClient } from '@supabase/supabase-js'

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

export const supabase = createClient(supabaseUrl, supabaseKey)`

.env (or .local, I tried both):

REACT_APP_SUPABASE_URL="myurl" REACT_APP_SUPABASE_KEY="mykey"

Tried .env / env.local

CodePudding user response：

I can't pinpoint what the problem is, but below are some things you can look into, and a workaround

Is the .env file in the correct directory?

the .env file should be inside the root directory of the project

Workaround, using the dotenv package

the dotenv package helps you read properties from the .env file, you can do

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

Then you can use the .env variables with process.env.{variable name}

CodePudding user response：

did you reloaded your application ?

Remember that environment variables are embedded during build time

CodePudding user response：

In your case if you re using React and want to access the .env.local, React have his own "dotenv" module, you don't need to import it, when you put in the .env.local file dont't forget to remove the string quote "" like this:

in your .env.local file

REACT_APP_SUPABASE_URL=myurl 
REACT_APP_SUPABASE_KEY=mykey

than use it like this for your connection

process.env.REACT_APP_SUPABASE_URL
process.env.REACT_APP_SUPABASE_KEY

once is done you need to restart your React app.