google is not defined

[ubilabs]

google is not defined

[maiopirata]

My workaround is working..

the problem for me is not that the package is not working but that it is not suited to be isomorphic (so to be rendered serverside also where the browser variables are not working).

with process.env.BROWSER I can execute the code only clientside, so it is working!

if (process.env.BROWSER) {
    var Geosuggest = require('react-geosuggest');
}
{ process.env.BROWSER && ( 
    <Geosuggest 
           placeholder="Start typing!" 
           initialValue="Hamburg" 
           onSuggestSelect={this.onSuggestSelect} 
           location={new google.maps.LatLng(53.558572, 9.9278215)}/>)
}

Great package anyway!
@jdaily you have the same issue since the react-starter-kit is isomorphic as well!

I close the issue... eventually @ro-ka in one of your next release try to make it isomorphic, eve if I think that it is not trivial since you're not starting from scratch..

bye

[ro-ka]

You can pass in a google.maps instance for usage on the server – see the Readme. If nothing get’s passed in, the module tries to use the global google.maps.

Does this help?

[maiopirata]

I solved partially this way:

in the react component I put:

if (process.env.BROWSER) {
var Geosuggest = require('react-geosuggest');
}

and the render part:

{ process.env.BROWSER && }

This works!

I don't know how you can define a google.maps object on the server, since is linked to window... I'm too newby to this...

I use the boilerplate of https://github.com/gpbl/isomorphic500 for a isomorphic app so all the code is executed on the server-side and then the app is dehidrated on the client side.

Thanks anyway

[maiopirata]

sorry, the render part is incomplete...

{ process.env.BROWSER &&
}

[maiopirata]

I've clearly some problem with github...

[ro-ka]

Sorry, I’m not sure how to help you here…

[ro-ka]

Do you still have issues?

[jdaily]

It looks like i'm encountering the same issue using react 0.14 from react-starter-kit.

I'm including google's javascript Places API and I'm Importing react-geosuggest as

import Geosuggest from 'react-geosuggest';

And serving using npm

$ npm start

> @ start /Users/user/geo-project
> babel-node --eval "require('./tools/start')().catch(err => console.log(err.stack))"

build
clean
copy
bundle
Child
         Asset     Size  Chunks             Chunk Names
        app.js  1.75 MB       0  [emitted]  main
    app.js.map  2.01 MB       0  [emitted]  main
Child
            Asset    Size  Chunks             Chunk Names
        server.js  165 kB       0  [emitted]  main
    server.js.map  111 kB       0  [emitted]  main
serve

/Users/user/geo-project/node_modules/react-geosuggest/module/Geosuggest.js:29
      googleMaps: google && google.maps,
                  ^
ReferenceError: google is not defined
    at Function.getDefaultProps (/Users/user/geo-project/node_modules/react-geosuggest/module/Geosuggest.js:29:19)
    at Object.ReactClass.createClass (/Users/user/geo-project/node_modules/react-geosuggest/node_modules/react/lib/ReactClass.js:882:46)
    at Object.<anonymous> (/Users/user/geo-project/node_modules/react-geosuggest/module/Geosuggest.js:10:24)
    at Module._compile (module.js:460:26)
    at Object.Module._extensions..js (module.js:478:10)
    at Module.load (module.js:355:32)
    at Function.Module._load (module.js:310:12)
    at Module.require (module.js:365:17)
    at require (module.js:384:17)
    at Object.<anonymous> (/Users/user/geo-project/build/webpack:/external "react-geosuggest":1:1)

[jdaily]

Yea, that makes sense.

There is a project (google-map-react) that supports isomorphic rendering.
However it is using the default Google Maps script, How google-map-react loads google

Loading the google script asynchronously would fix this issue for an isomorphic app.

[ro-ka]

Will take a look on the google-map-react project. What would you expect to happen when rendering on the server? Render the markup and stop?

[jdaily]

I'm assuming it would render the markup and the browser would evaluate the javascript that is served shortly after.
Loading the google map script in javascript would allow server side bundlers to process the js for the browser. Which is needed because they don't evaluate the script tags in HTML.

I've been playing around with ways to do this without forking on env.BROWSER using Js-GoogleMapsLoader

[ro-ka]

Thanks. Currently the Geocoder is loaded once at component loading. Would need to delay that till the component get’s mounted. Makes sense. Will think about drawbacks. :)

[izziaraffaele]

The problem is here
https://github.com/ubilabs/react-geosuggest/blob/master/src/Geosuggest.jsx#L25

Google api should be taken in consideration after component is mounting otherwise rendering server side will not be possible.

This commit should solve the problem, take a look at it @ro-ka. Also google library should not be part of the state. It doesn't make sense at all.

https://github.com/izziaraffaele/react-geosuggest/commit/d47ae216543c57be7bc788915e07203a19ce2f2d

[kang-chen]

might be two different issues here although this helped me when using create react app, I assume other boiler plates have methodologies:

https://stackoverflow.com/questions/43714895/google-is-not-defined-in-react-app-using-create-react-app

basically at top of component using google.maps use code:

const google = window.google;

[Malik-93]

might be two different issues here although this helped me when using create react app, I assume other boiler plates have methodologies:

https://stackoverflow.com/questions/43714895/google-is-not-defined-in-react-app-using-create-react-app

basically at top of component using google.maps use code:

const google = window.google;

Great!
Its working for me now.
Thanks!