ReferenceError: window is not defined

[jwnx]

I'm getting this error while trying to follow Ari's tutorial.

ReferenceError: window is not defined
at /home/drstein/projects/react-tests/node_modules/google-maps-react/dist/lib/ScriptCache.js:20:21
at Object.defineProperty.value (/home/drstein/projects/react-tests/node_modules/google-maps-react/dist/lib/ScriptCache.js:5:9)
at Object.<anonymous> (/home/drstein/projects/react-tests/node_modules/google-maps-react/dist/lib/ScriptCache.js:13:3)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
at Function.Module._load (module.js:439:3)
at Module.require (module.js:498:17)
at require (internal/module.js:20:19)
at Object.defineProperty.value (/home/drstein/projects/react-tests/node_modules/google-maps-react/dist/GoogleApiComponent.js:5:66)
at Object.<anonymous> (/home/drstein/projects/react-tests/node_modules/google-maps-react/dist/GoogleApiComponent.js:13:3)
at Module._compile (module.js:571:32)
at Object.Module._extensions..js (module.js:580:10)
at Module.load (module.js:488:32)
at tryModuleLoad (module.js:447:12)
/home/drstein/projects/react-tests/tools/runServer.js:80
      throw new Error(`Server terminated unexpectedly with code: ${ code } signal: ${ signal }`);
      ^

Error: Server terminated unexpectedly with code: 1 signal: null
at ChildProcess.server.once (/home/drstein/projects/react-tests/tools/runServer.js:54:17)
at ChildProcess.g (events.js:292:16)
at emitTwo (events.js:106:13)
at ChildProcess.emit (events.js:191:7)
at Process.ChildProcess._handle.onexit (internal/child_process.js:215:12)
error Command failed with exit code 1.

This is my MapLocation.js:

import React from 'react';
import withStyles from 'isomorphic-style-loader/lib/withStyles';
import {Map, GoogleApiWrapper} from 'google-maps-react';
import s from './MapLocation.css';

export class MapLocation extends React.Component {
 render () {
      if (!this.props.loaded) {
              return (<div>Loading...</div>)
      }

      return (<div> Hello </div>)
  }
}

export default GoogleApiWrapper({
  apiKey: __GAPI_KEY__
})(MapLocation)

Any ideas? Thank you very much.

[7s4r]

Try this: #7

[kcode20]

@auser This issue should be able to close with the pull request I created. I followed the same suit as @7s4r in issue #7 that was merged today.

[kcode20]

@auser, when are you going to push another version to npm? Don't mean to nit, but I need this functionality for something I am building.

[auser]

I pushed one yesterday (v1.1.0) Cheers! Ari Lerner curl -IL http://ari.io On Wed, Jul 26, 2017 at 9:00 AM -0700, "Khristian Brooks" <notifications@github.com> wrote: @auser, when are you going to push another version to npm? Don't mean to nit, but I need this functionality for something I am building. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[smartcris]

After manually changing var google = typeof window !== 'undefined' && window.google || null; , I get this error:

ReferenceError: document is not defined
    at Object.ScriptCache.Cache._scriptTag (D:\apps\freedrive\node_modules\google-maps-react\dist\lib\ScriptCache.js:42:31)
    at D:\apps\freedrive\node_modules\google-maps-react\dist\lib\ScriptCache.js:127:95
    at Array.forEach (native)
    at ScriptCache (D:\apps\freedrive\node_modules\google-maps-react\dist\lib\ScriptCache.js:124:34)
    at defaultCreateCache (D:\apps\freedrive\node_modules\google-maps-react\dist\GoogleApiComponent.js:89:45)
    at new Wrapper (D:\apps\freedrive\node_modules\google-maps-react\dist\GoogleApiComponent.js:114:41)
    at D:\apps\freedrive\node_modules\react-dom\lib\ReactCompositeComponent.js:294:18
    at measureLifeCyclePerf (D:\apps\freedrive\node_modules\react-dom\lib\ReactCompositeComponent.js:75:12)
    at ReactCompositeComponentWrapper._constructComponentWithoutOwner (D:\apps\freedrive\node_modules\react-dom\lib\ReactCompositeComponent.js:293:16)
    at ReactCompositeComponentWrapper._constructComponent (D:\apps\freedrive\node_modules\react-dom\lib\ReactCompositeComponent.js:279:21)

[thomasmarr]

@smartcris I am experiencing the same issue. If you have a fix for this yet, please let me know.

[Eschon]

@GreatScot I ran into the same problem. There is an if before document is used, I just added && typeof document !== 'undefined' to that.

After that there is another error because window is used. This time it happens in the render method of GoogleApiComponent.js.

There I just replaced google: window.google with google: typeof window !== 'undefined' ? window.google : null

[thomasmarr]

Thanks Eschon. That line seems to set the 'google' item in the <Map> component props, so if you tell it to set 'google' to null whenever there is no window object, I guess you prevent server side rendering entirely? I think I need to figure out a better fix for these issues. Maybe I am misunderstanding?

[Eschon]

@GreatScot yeah the map doesn't render on the server in this case. But in my case it is only a small part of a big page and I don't really care if it is not rendered on the server as long as server side rendering works in general.