title: My API Key is undefined even though it's in an .env file and a global var
body: <p>When trying to fetch data from an API, the key that I was using was considered "undefined". My key works because I replaced the {key=undefined} in the network console with the actual string and I was able to get the data that I needed. Any thoughts? Also, I know you shouldn't hide any API keys in a React app but I am just using this for testing purposes. If it helps to clarify things, I did use Create-React-App and they did have a major update in the last 3 months, so I wonder if that has anything to do with it. </p>
  
  <pre><code>     const bartKey = process.env.REACT_API_BART_API_KEY;
       console.log(`Api key: ${process.env.REACT_API_BART_API_KEY}` );
  
       //inside class Component
       async getAllStations(){
          try{
              const response = await fetch(`http://api.bart.gov/api/etd.aspx?cmd=etd&amp;orig=${this.state.selectedStation}&amp;key=${bartKey}&amp;json=y`);
              // console.log(response.json());
              const data = await response.json();
              console.log('Initial data: ', data);
  
              // fetch(`http:api.bart.gov/api/etd.aspx?cmd=etd&amp;orig=${this.state.selectedStation}&amp;key=${bartKey}&amp;json=y`)
              //     .then(response =&gt; response.json())
              //     .then(data =&gt; console.log(`here: ${data}`))
          }catch(e){
              console.log(`Error: ${e}`)
          }
  
      }
  </code></pre>