Error: supabaseUrl is required (supabase) postgresql

Question

i'm using supabase postgresql online, in which important create a .env file where is my online DMBS's URL and anon key is saved and a "supabase client" file also create to access DBMS and tables and the import "supabase client" in the require file. I have done all the same things that have in their documentation but facing still an error "Error: supabaseUrl is required" but i alredy enter the url.

..................code....................................

import React, { useState } from 'react'
import './App'
import Login from './Login';
import { BrowserRouter as Router, Route, Link, NavLink, Switch } from 'react-router-dom';
import {supabase} from './supabaseClient';

return(
    <>
    <div className="container" >
        <div className="heading">
            <h1>SignUp Form</h1>
        </div>

    <form>
    <Router>
        <div className="mb-3">
            <label  className="flabel">Name</label>
            <input type="text" className="fcontrol" placeholder="Enter Your Name"/>
        </div>
        <div className="mb-3">
            <label  className="flabel">Phone</label>
            <input type="tel"  className="fcontrol" placeholder="Enter Your Phone Number"/>
        </div>
        <div className="mb-3">
            <label  className="flabel">Email</label>
            <input type="email"  className="fcontrol" placeholder="Enter Your Email"/>
        </div>
        <div className="mb-3">
            <label  className="flabel">Password</label>
            <input type="password"  className="fcontrol" placeholder="Enter Your Password"/>
        </div>
        
        <div className="mb-3">
        <button className="btn1" >SignUp</button>
        <Link exact to="/Login">
            Have an already acoount? Login
        </Link> 
        </div>

        {/* --------------------- switch ------------------- */}

        <switch>
            <Route exact path="/Login" component={Login} />
                

        </switch>

        </Router>
    </form>

    </div>
    </>


   )
}
export default Form;

...........................supabase client.................................

import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.REACT_APP_SUPABASE_URL
const supabaseAnonKey = process.env.REACT_APP_SUPABASE_ANON_KEY

export const supabase = createClient(supabaseUrl, supabaseAnonKey)

Answer 1

I had a similar problem. I turned out I just had to restart my dev instance through the terminal because the environment variables get loaded in at launch after running npm run dev or whatever you are using.

Answer 2

this problem is maybe connected with .env file if the "Error: supabaseUrl is required" make sure that the REACT_APP_SUPABASE_URL is the same at the .env file

Answer 3

For me...I had the file as env.local when it needed to be .env.local The first dot is needed

Answer 4

8koi's comment was it for me. Gotta prefix the variable with VITE_ if you're useing vite.

Answer 5

Environment variables are not accessible by the browser by default. You need to prefix them with NEXT_PUBLIC Here's a similar Stackoverflow thread