Need Help With Deploying React Project With Environment Variable

[SamuelBanya]

Hello there,

I have a React project utilizing the Google Maps API key that runs locally without an issue to use ‘process.env’ with the relevant API key stored inside the ‘.env’ file.

However, I added the same ‘REACT_APP_GOOGLE_API_KEY’ to my Environment Variables section in Render, and deployed the same project on Render only to get this error:

Google Maps JavaScript API error: InvalidKeyMapError
invalid-key-map-error
App.js:73 Error: The provided API key is invalid. .
Server returned status code REQUEST_DENIED

I referred to the related Docs page you guys have on this topic aka the ‘deploy-create-react-app’ article link (can’t link this here for some reason on your end).

I then added the following to the ‘build’ script that runs for my project when its deployed on Render:

# Adding Google Maps API key specific environment variable:
# From the Render docs page:
export REACT_APP_GOOGLE_API_KEY=$REACT_APP_GOOGLE_API_KEY

Yet I got that error above ^.

Any ideas on what I could possibly do to fix this?

[SamuelBanya]

The only thing I can add is that I literally use this with ‘process.env’ in the code itself to access that environment variable within the React project, is this the correct method if I deploy this to Render?

This is the return statement for the ‘Summary’ section of my project that uses this:

    return (
        <div >
            <h1>Map</h1>
                <LoadScript
                    googleMapsApiKey={process.env.REACT_APP_GOOGLE_API_KEY}
                >
                    <div className="GoogleMapDiv">
                        <GoogleMap
                            mapContainerStyle={containerStyle}
                            center={centers[0]}
                            zoom={3}
                        >
                            {markers.map(({ id, name, position }) => {
                            return (
                                <Marker
                                key={id}
                                position={position}
                                onClick={() => handleActiveMarker(id)}
                                >
                                {activeMarker === id ? (
                                    <InfoWindow onCloseClick={() => setActiveMarker(null)}>
                                    <div>{name}</div>
                                    </InfoWindow>
                                ) : null}
                                </Marker>
                            )})}
                        </GoogleMap>
                    </div>
                </LoadScript>
            <h1>Summary</h1>
            <div className="SummaryPageListDiv">
                { partyResults }
            </div>
        </div>
    )

This is the part of my project that utilizes the ‘Geocode’ section for the same Google Maps API key:

  async function get_coordinates(name) {
    Geocode.setApiKey(process.env.REACT_APP_GOOGLE_API_KEY);
    Geocode.setLanguage("en");
    Geocode.setLocationType("ROOFTOP");
    return await Geocode.fromAddress(name).then(
      (response) => {
        const { lat, lng } = response.results[0].geometry.location;
        let position = { lat: lat, lng: lng }
        // Related Stackoverflow post:
        // https://stackoverflow.com/questions/38884522/why-is-my-asynchronous-function-returning-promise-pending-instead-of-a-val
        return position
      },
      (error) => {
        console.error(error);
      }
  ).then((response) => {
    return response;
  })}

[SamuelBanya]

It turns out that it was an issue on my end with the Environment Variable having an additional unnecessary character present. Now it works like a charm with this revision.

Please feel free to close this one, thanks!