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
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.
Thanks.
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.
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:
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.
