• Jobs
  • About Us
  • professionals
    • Home
    • Jobs
    • Courses and challenges
  • business
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

435
Views
environment variables are undefined in reactJS

I'm working on an application utilizing the spotify API. I have secrets I want to keep in the form of Client ID's , endpoints and the like. I've done everything I am required to do to successfully use environment variables in react. This includes prefixing my variables with REACT_APP_ and making sure .env is in the root folder. In the code shown below, I am able to briefly console.log my environment variables.

 const login = useRef(`${process.env.REACT_APP_AUTH_ENDPOINT}?client_id=${process.env.REACT_APP_CLIENT_ID}&redirect_uri=${process.env.REACT_APP_REDIRECT_URI}&response_type=${process.env.REACT_APP_RESPONSE_TYPE}`);

yet when I try to access them in a render here it is undefined

{!token ?

            <a href={login.current}>Login to spotify</a>
            :
            <button onClick={logout}>Logout </button>

          }
          {
            token ?

              <form onSubmit={searchArtists}>
                <input type='text' onChange={e => setSearchKey(e.target.value)} placeholder='search for a song or artist' />
                <button type='{submit}'>Search</button>
              </form>
              
              :
              <h2>Please login</h2>
          }
}

I made sure to use a useRef hook just to make sure that the values persist so I can use my secrets when I want to return a render for react. This was to no avail. I have a feeling it has to do with when I refresh? or perhaps my environment clears after I go to my redirect URI? I also didn't bother importing dotenv because from what I've read , React handles all of that on its own. For reference here is the .env file as well:

REACT_APP_CLIENT_ID =*************************
REACT_APP_REDIRECT_URI =https://swipewithspotify.vercel.app/
REACT_APP_AUTH_ENDPOINT =https://accounts.spotify.com/authorize
REACT_APP_RESPONSE_TYPE =token

If there's some concept that I have wrong I'd love an explanation if possible or any kind of light to be sure shed on this problem.

about 3 years ago · Juan Pablo Isaza
1 answers
Answer question

0

Best way to Add env variable if we got undefined type error, I solved the same problem. Please follow these steps.

  1. npm install dotenv-webpack --save-dev

  2. Create .env file under root folder 3.create env variable as

REACT_APP_MY_API=342432...
  1. Create webpack.config.js file under the root folder with the following content

  2. add this same code into webpack.config.js file.

     const Dotenv = require('dotenv-webpack');
      module.exports = {
     plugins: [
         new Dotenv()
       ]
     }
    
  3. And you can use where do you want in your root folder or src folder

  4. access variables like this

const apiKey = process.env.REACT_APP_MY_API;
  1. When you add a variable into env file and still got undefined make sure you restart your server
about 3 years ago · Juan Pablo Isaza Report
Answer question
Find remote jobs

Discover the new way to find a job!

Top jobs
Top job categories
Business
Post vacancy Pricing Our process Sales
Legal
Terms and conditions Privacy policy
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recommend me some offers
I have an error