Environment variables .env not working in component

Question

I'm new to google maps and .env Environment variables I have this component that is rendering google maps I'm trying to set the Environment variable instead of embedding the google maps API key directly, but it's not showing up. here is my code...

import React from "react"
import {GoogleMap, LoadScript, Marker} from "@react-google-maps/api"

const MapContainer = () => {

    const mapStyles = {
        height: "50vh",
        width: "100%"
    }

    const defaultCenter = {
        lat: 40.668259, lng: -73.949158
    }


    const locations = [
        {
            name: "Brooklyn, NY",
            location: {
                lat: 40.668259,
                lng: -73.949158
            }
        }
    ]

    return (
        <LoadScript
            googleMapsApiKey={`${process.env.REACT_APP_GOOGLE_KEY}`}>
            <GoogleMap
                mapContainerStyle={mapStyles}
                zoom={13}
                center={defaultCenter}>
                {
                    locations.map(item => {
                        return (
                            <Marker key={item.name} position={item.location}/>
                        )
                    })
                }
            </GoogleMap>
        </LoadScript>
    )
}

export default MapContainer

Could somone please help me.

Some questions: how are you assigning the env variables, in the CLI or in a `.env` file? Please provide that (with fake values). Is this a `create-react-app` project, or some other starting point for your project? If you `console.log(process.env)` what do you get? And finally, have you tried everything in the answer here:? https://stackoverflow.com/questions/57663555/how-to-access-environment-variables-from-the-front-end — Alexei Darmin, Jul 08 '21 at 19:58
It's in a .env file in the root. `REACT_APP_GOOGLE_KEY = dededededded` — shlomo minkowicz, Jul 08 '21 at 20:03
Wha do you get if you `console.log(process.env.REACT_APP_GOOGLE_KEY)` in your component? — Shmili Breuer, Jul 08 '21 at 21:02
@shlomo minkowicz Have you restarted your project since you added the env variable? — Shmili Breuer, Jul 08 '21 at 21:51

score 0 · Answer 1 · answered Oct 04 '22 at 01:26

0

Mine wasn't working either then I read the Alexei Darmin's suggestions and went to the mentioned Stackoverflow link. All it took was reading a few words at the bottom of one of the answers...run npm start after adding the .env file...yup... that did the trick.

answered Oct 04 '22 at 01:26

BlueScatPack

11
2

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Oct 07 '22 at 06:58

Environment variables .env not working in component

1 Answers1