Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

google is not defined in react app using create-react-app

I create a react app using the cli called create-react-app. Look like Facebook did lots of things underneath, such as webpack etc. However, I guess it may also has some limitations. I try to follow this tutorial to load google map api. And when I debug my code, I can see the google map has been successfully referenced.enter image description here.

But then I click play and let application finishes running. I got google is not defined error from webpackHotDevClient.js and my application crashes.

enter image description here

enter image description here

Since webpack compile the files on the fly, I assume it has trouble to load google map via https?

Any thoughts?

like image 623
eded Avatar asked May 01 '17 05:05

eded


People also ask

Is Google built on React?

“Google employees are not allowed to use React!” Nope, the patent grant was updated in response to their feedback: code.facebook.com/posts/16394739… sunil pai, inc. not to mention all the goodwill FB would lose (internally and externally) if they sued someone for using react.

Does Google Use React for anything?

On the other hand, ReactJS is just a library so it's good for SPA (Single page application) or where it doesn't require much formatting. Angular is used by companies Google, Forbes, Youtube, Wix, telegram and React is used by companies Facebook, Instagram, Twitter, Airbnb, Netflix, Paypal, Uber.


2 Answers

As mentioned in the user guide, you need to explicitly read any global variables from window. Put this at the top of the file and it will work:

const google = window.google; 

The reason we enforce this is because people commonly misunderstand the difference between local variables, imported modules, and global variables, and so we want to always make it clear in the code when you use a global variable.

By the way, this is not related to Webpack or HTTPS. You see this because we use a linting rule that forbids unknown global variables.

like image 189
Dan Abramov Avatar answered Sep 22 '22 15:09

Dan Abramov


I think the google variable is already available when you import google map from script in html. This error caused by Eslint, you can try and add the below line to the top of your file to disable ESlint

/*global google*/ 
like image 30
voquockhanh Avatar answered Sep 19 '22 15:09

voquockhanh