Error: supabaseUrl is required (supabase) postgresql

Viewed 3503

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)
2 Answers

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.

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

Related