0

I'm trying to utilise an API token that's currently residing in my .env file. I've tried

require('dotenv').config()
console.log(process.env)

and am returned with this error

Uncaught ReferenceError: require is not defined

so I tried.

import * as dotenv from 'dotenv'
dotenv.config()

and get this error in return

Uncaught ReferenceError: require is not defined

I am using react and have used the require method in another js file on the same project and it works perfectly fine, but trying to use them in this jsx file doesn't seem to work I can't understand why,

Thank you.

Ko Te Atarangi Ahau
  • 1
  • 2
    You can add a variable, starting with the prefix REACT_APP_ in your env and access it via process.env.REACT_APP_* – subodhkalika Nov 21 '22 at 02:19
  • Hello @subodhkalika, yes that is exactly how I used it in the other js file mentioned and it works fine, but it's not just not happy when I try and use import/require in my react components I get the errors stated above. – Ko Te Atarangi Ahau Nov 21 '22 at 22:18

1 Answers1

0

ReactJs is a browser/client-side JavaScript thus,

require() does not exist in the browser/client-side JavaScript. read here

To answer your question on implementing dotenv in client-side.

You can read more about here: Is it possible to use dotenv in a react project?

Stacks Queue
  • 848
  • 7
  • 18
  • ah, I see, so the reason why the other file uses an env is that it is in fact on the server side? so I need to try and make a server-side function/application that I can use to talk to the client's end? – Ko Te Atarangi Ahau Nov 21 '22 at 03:14