.Env works locally on my React project but it is not working when deployed. I can see the key in the console log

Hello, I have deployed a real estate site( https://themooregroup.netlify.app ) with map markers and a city map that pulls in using an API.
It works fine locally & I even console logged the api key after deployment & I see the API is accurate. However, the city map is not pulling in because I am receiving an error message: “Failed to load resource: the server responded with a status of 404”

Therefore, my markers appear but there is no map.

Steps I have taken.
1.Within React I installed dotenv
2.Created a .env file in the correct section within the file structure
3. Within the .env added REACT_APP_API_KEY = iputtheapihere
4.In the map component I created a variable for the API: const api_key= process.env.REACT_APP_API_KEY;
5. Within useEffect I added the variable to the path: https://api.maptiler.com/maps/streets/style.json?key=${api_key},
6.In Netlify I updated the environment settings by adding REACT_APP_API_KEY & the API key as the value.

Can you please advise what steps were missed to make this work correctly. ( images and deploy logs

are attached)

Hello @RM_TX , sorry you are experiencing problems with your environment variables.
I visited your website and then checked the console in Chrome Dev Tools. It appears you are getting the error 'Uncaught ReferenceError: y is not defined' in the console.

Upon research it seems the error is from some versions of Mapbox

Work Around

Either upgrade to the latest version of mapbox-gl and try redeploying again to see if it works or Downgrade mapbox-gl.

If you are already using the latest version of mapbox-gl, you have to downgrade mapbox-gl to version @1.13.0 for it to work.

How to downgrade

First uninstall version 2.x.x in your project
npm uninstall mapbox-gl

then run

npm install mapbox-gl@1.13.0

Redeploy again to see it works. Let me know the outcome.

Hello, first, thanks for your suggestion. I had the current version 2.10 but per your comment, I downgraded to 1.13 and redeployed. Unfortunately, I am receiving the same issue. Has any other workaround for this issue been discovered?

Hello, @RM_TX , sorry it’s still not working. Kindly revert back to the latest version of mapbox and then follow some of the workarounds based on reasearch from the stack overflow and Github issues link below.

Hey there, @RM_TX :wave:

Thanks for reaching out and welcome to the Netlify Forums! When I follow the link to your site, it loads perfectly and I can engage with the map. This is what I am seeing:

Please let us know if you are still encountering issues. Thanks!

1 Like

Thanks. I think the issue may have been with Maplibre. Therefore, I recreated it with Mapbox as all the other stack overlow suggestions weren’t working. I’ll close this ticket.

1 Like

Hi @RM_TX . Glad to know you were able to solve the problem. Thanks for sharing.

1 Like