2

I have a create-react-app that is using dotenv to hide a Google Maps API key, but when I try this I'm unable to get the map to load: I get an error saying Google Maps API error: InvalidKeyMapError. I was able to get this working before, but this was with the API key exposed.

Here's what I have in my files. In App.js:

import React, { Component } from 'react'
import { GoogleApiWrapper } from 'google-maps-react'
require('dotenv').config()

const apiKey = `${process.env.REACT_APP_GOOGLE_MAPS_KEY}`
console.log(apiKey)

...

export default GoogleApiWrapper({
apiKey: apiKey,
})(App)

In my .env file I have: REACT_APP_GOOGLE_MAPS_KEY=myapikey

In my app.js file I pass down the google props to my MapContainer component, which is in my render method, that loads the map itself. Is there some kind of conflict with dotenv and being able to read the google-maps-react API key?

I've already tried searching for the answer here and came across this: How do I hide API key in create-react-app?

However even after restarting the server multiple times I get back the same error as well as undefined for the console.log(apiKey).

wellowlbe
  • 25
  • 6
  • You don't need `require('dotenv').config()` if you are using `create-react-app`, I believe. Have you tried removing that? – Tholle Jun 28 '18 at 18:16
  • @Tholle I tried that just now and still receive the same error. If I remove that line from `App.js` would I then need to change my `.env` in some way, like the format and possibly exporting it as a config object? Or should it be fine the way I already have it formatted? – wellowlbe Jun 28 '18 at 18:20
  • It should be fine with a single line of text `REACT_APP_GOOGLE_MAPS_KEY=myapikey`. Very odd. What version of `create-react-app` did you use to create the project with? [`.env` support was added in 1.1.0](https://github.com/facebook/create-react-app/blob/next/CHANGELOG.md#110-january-15-2018). – Tholle Jun 28 '18 at 18:22
  • @Tholle I'm using version `1.0.0` of `create-react-app`. I'm also using version `15.6.1` of `react`. Ah, so I should try upgrading with that version and then give it another go? – wellowlbe Jun 28 '18 at 18:29
  • It might work, I'm not sure. [This](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#updating-to-new-releases) indicates that you only have to update `react-scripts`: "In most cases bumping the `react-scripts` version in `package.json` and running `npm install` in this folder should be enough, but it’s good to consult the changelog for potential breaking changes." – Tholle Jun 28 '18 at 18:32
  • @Tholle Ah, I tried this, but it doesn't seem to work. I went through the changelog and ran the migration command `yarn add --exact react-scripts@1.1.4`, but to no avail. – wellowlbe Jun 28 '18 at 19:52

1 Answers1

0

For anyone struggling with this there is an alternative library called google-map-react (missing the "s") which seems to work fine with .env variables

https://github.com/google-map-react/google-map-react

Josh
  • 847
  • 9
  • 17