1

I'm trying to set up my React app with Supabase for fetching data but everytime getting the error Uncaught Error: supabaseUrl is required.

Error Image

I've checked all the previous answers but still getting the error:

My .env.local file:

REACT_APP_SUPABASE_URL=https://eyd.....
REACT_APP_SUPABASE_ANON_KEY=eyJIUzI1Ni.....

My supabase.js file:

import { createClient } from "@supabase/supabase-js";

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

export default createClient(supabaseUrl, supabaseAnonKey);

The file where I'm trying to fetch my data:


import React from "react";
import { useEffect } from "react";
import supabase from "../supabase";

export default function BlogPosts() {
    async function fetchData() {
        let { data: bposts, error } = await supabase.from("bposts").select("*");
        console.log(bposts);
    }

    useEffect(() => {
        fetchData();
    }, []);
  
  return <pre>{JSON.stringify(bposts, null, 2)}</pre>;

}

The error I'm getting:

SupabaseClient.ts:87 
        
       Uncaught Error: supabaseUrl is required.
    at new SupabaseClient (SupabaseClient.ts:87:1)
    at createClient (index.ts:38:1)
    at ./src/supabase.js (supabase.js:6:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)
    at ./src/components/Blog/BlogCard.js (Blog.js:28:1)
    at options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at fn (hot module replacement:62:1)

I've tried:

✅ restarted my dev instance

✅ rechecked the api values for REACT_APP_SUPABASE_URL and REACT_APP_SUPABASE_ANON_KEY

✅ checked if the REACT_APP_SUPABASE_URL is the same at the .env file

But nothing helped. Looking for a solution, would appreciate the help :)

shry
  • 11
  • 3

1 Answers1

0

If code is not able to access the env variable then try require("dotenv").config();

npm install dotenv
Pankaj Shrivastava
  • 120
  • 3