Const declaration not being respected by repl in javascript

This code. I have a Secret saved in REPLIT_DB_URL and it is a valid url but my repl refuses to start my js project with the below error:

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

const supabaseUrl = process.env.REPLIT_DB_URL
const supabaseKey = process.env.REPLIT_DB_SECRET
const supabase = createClient(supabaseUrl, supabaseKey)

export default supabase

This error:

./src/config/supabaseClient.js
src/config/supabaseClient.js:6
  3 | 
  4 | const supabaseUrl = process.env.REPLIT_DB_URL
  5 | const supabaseKey = process.env.REPLIT_DB_SECRET
> 6 | const supabase = createClient(supabaseUrl, supabaseKey)
  7 | 
  8 | export default supabase

I try to import the function via this code:

import React from 'react';
import { useEffect, useState } from'react';
import supabase from '../config/supabaseClient';

const Home = () => {
  console.log(supabase);
  const [fetchError, setFetchError] = useState(null);
  
  return (
    <div className="page home">
      <h2>Home</h2>
    </div>
  )
}

export default Home

but it does not compile and I don’t understand what is wrong since it works on a deparate demo I have access to. Any idea?

Could you provide a link to your repl and the demo that you say this works in?

1 Like

That is a special variable, try naming it something else. (That is for the replit database feature)

4 Likes

I tried changing it to DB_URL and I get the same result.

Same error still? Did you change the code too?

Technically the demo is a youtube video https://www.youtube.com/watch?v=VjohMDwjty4&list=PL4cUxeGkcC9hUb6sHthUEwG7r9VDPBMKO&index=3 and it is demonstrated on a local dev machine. My local dev machine sucks or I would try it here.

1 Like

Sorry for formatting error above. Yes same error and it is only used once in my code.

1 Like

That video doesn’t show the supabaseClient file, does a different video show that one?

1 Like

Yes the one before it in the series.

1 Like

Hm. Verify the Secret is set correctly in the Secrets tab, and that you’re accessing it under the right name in your code. Otherwise, I’m not sure what the issue could be.

1 Like

Interestingly when I hover over the supabase const it gets the details listed as:

(alias) const supabase: SupabaseClient<any, "public", any>

import supabase

and I am not certain about this but “<any, “public”, any>” seems to be incorrect as I would expect the values supabaseUrl and supabaseKey unless the linter just isn’t smart enough to see that.

I will try your next suggestion now.

1 Like

No new luck. Should I be using a different method to call the Secrets variables than “process.env.”? in

const supabaseUrl = process.env.DB_URL
1 Like

No, I think that is fine, try checking that the URL and API secrets are correct, perhaps one of them is set incorrectly.

2 Likes

Okay I got this to work with a chatgpt suggestion. importing the variables from Secrets was definitely the problem, my solution involved a new file and this:

// config.js

const config = {
  supabaseUrl: 'your_supabase_url',
  supabaseKey: 'your_supabase_key',
};

export default config;

import React from 'react';
import config from './config';
import { createClient } from '@supabase/supabase-js'

const supabaseUrl = process.env.DB_URL
console.log(process.env)
const supabaseKey = process.env.DB_SECRET
const supabase = createClient(config.supabaseUrl, config.supabaseKey)
console.log(process.env)
export default supabase

another 5 hours of my life gone.

Thanks to you guys for responding!

1 Like

Wouldn’t that be a security risk? I don’t know as I’ve never used supabase

1 Like

It is. as it is a demo only project I don’t care that much. I would prefer a better solution but I don’t figure out why the Secrets values are not importing correctly.

1 Like

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