1

i want to render the component Searchbox, i copied it exactly in my app, but i get an error:

error  Line 44:  'google' is not defined  no-undef   Line 79:  'google' is not defined  no-undef

i already loaded my 

<script async defer src="https://maps.googleapis.com/maps/api/js?key=MY_KEY_IS_HERE"></script>

into the head of my index.html but it showes me the error anyway. Could it be, that index.html can't load my script ?

i created my app with create-react-app

HarryTgerman
  • 107
  • 1
  • 5
  • 19
  • 1
    You're loading the API js asynchronously, but it sounds like your own JS is probably trying to access it before it's loaded. What does the rest of your JS look like? You should probably just add a `callback` parameter to the call to the Maps API so it only calls your function once it's loaded. – duncan Oct 03 '17 at 08:39
  • Can you provide more relevant source code? – James Solomon Belda Oct 23 '17 at 07:52

1 Answers1

2

It is probably your linter complaining about an undefined variable. Because 'google' is defined in a script that loads externally with <script> tag, your linter doesn't know about it. Try adding an exception for the variable. In eslint you would add this line at the top of the file where you access the variable: /*global google*/ But since you have the async attribute in your <script> tag, your script may still run before the maps API is executed. One solution would be to remove the async and defer attributes. But if you really want the maps API to load asynchronously, then you could try an additional library, like react-async-script-loader. Here's a discussion about a similar problem.

Tariel Laelius
  • 21
  • 1
  • 3