Error thrown from SupabaseClient.ts:75 Uncaught Error: supabaseUrl is required, even though both variables are there.

[susmita-karibu]

Hi,

I followed the intsructions in this video (https://www.youtube.com/watch?v=Gz9bvYybaws&list=PL4cUxeGkcC9hUb6sHthUEwG7r9VDPBMKO&index=2)

1. added the following in .env

REACT_APP_SUPABASE_URL=<url from my project>
REACT_APP_ANON_KEY=<copied from my dashboard>

2. created supabaseClient.js as instructed.

import { createClient } from '@supabase/supabase-js';
const supabaseUrl = process.env.REACT_APP_SUPABASE_URL;
const supabaseKey = process.env.REACT_APP_ANON_KEY;
const supabase = createClient(supabaseUrl, supabaseKey); // got supabaseUrl is required error, in spite of this

export default supabase;

3. imported correctly in my Home.js file.

import supabase from "../config/supabaseClient"

const Home = () => {
  console.log(supabase);
  return (
    <div className="page home">
      <h2>Home</h2>
    </div>
  )
}

export default Home

and still got the following error

[susmita-karibu]

ok I set the env variables with export and it worked. But wondering why the .env didn't work.. any help will be appreciated.