Typescript and html templates not working with supabase client

Replit Help
1

My error message is this:

supabaseUrl is required.
    at new SupabaseClient (https://a329943f-83d7-4621-bee5-35a89cb79cc8.id.repl.co/static/js/bundle.js:12145:29)
    at createClient (https://a329943f-83d7-4621-bee5-

I get the same error in two repl’s one html and one typescript. based.

my supabaseClient.js file consists of this:

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)

export default supabase

It does not matter if I add the env variables into a file name .env or in the Secrets tool. I have also tried using the variable names REPLIT_DB_SECRET and REPLIT_DB_URL.

The typescript repl also complains about this:

✘ [ERROR] The JSX syntax extension is not currently enabled

    src/pages/Home.js:6:4:
      6 │     <div className="page home">
        ╵     ^

  The esbuild loader for this file is currently set to "js" but it must be set to "jsx" to be able
  to parse JSX syntax. You can use "--loader:.js=jsx" to do that.

which I tried fixing with Ghostwriters suggestions but that does not work either and now I don’t know what to do. The code I am trying to run is from GitHub - iamshaunjp/Supabase-Tutorial-for-Beginners: All the course files for the Supabase Tutorial playlist on the Net Ninja YouTube Channel & on Net Ninja Pro

Thanks!

1 Like
2

I don’t think you can access environment variables client-side, but I may be wrong.

1 Like
3

You cannot. It would be a security risk.

Could you provide a repl link so we can assist you easier?

1 Like
4

I added you @Firepup650

5

Not sure why, but okay.

  1. This definitely isn’t possible in a HTML/CSS/JS repl, those repls are weird.
  2. I got the js/jsx error to go away but now build does nothing. (./.build/index.js doesn’t exist)

I don’t use react, so I’m not sure what you’re doing here, someone else is probably better situated to help you.

6

Okay so I guess the root issue I do not understand is how to add secrets to a repl that does not include access to the Secrets tool (and also disallows them being added via env variables)?

7

I fixed this by switching to the Node template.

1 Like
8

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.