window is not defined about react-map-gl-geocoder

[Giboork]

getting this error while using next.js

[SamSamskies]

I finally got a chance to look into this more. I found a workaround that works and is recommended by Zeit. https://github.com/zeit/next.js/wiki/FAQ

// instead of doing this
// import Geocoder from 'react-map-gl-geocoder'

// do this
let Geocoder

if (typeof window !== 'undefined') { 
  Geocoder = require('react-map-gl-geocoder').default; 
}

At some point, I'll try and make a PR to the suggestions library to only set window.Suggestions if window is not undefined. If someone else gets around to doing that before me, could you please post a comment here to let everyone know. If we can get that PR merged, we'll also need to ask mapbox-gl-geocoder if they can update their suggestions dependency.

[jaronheard]

I ran into a similar issue as I was trying to get CIVIC's component library to work in SSR contexts, such as Gatsby.

Here's the similar error I saw running gatsby build, before using the null loader webpack config trick that Gatsby recommends, described in more detail in this PR

  55 |  */
  56 | var Suggestions = require('./src/suggestions');
> 57 | window.Suggestions = module.exports = Suggestions;
     | ^
  58 |


  WebpackError: ReferenceError: window is not defined

  - index.js:57 Object../node_modules/suggestions/index.js
    [lib]/[suggestions]/index.js:57:1

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:3 Object../node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js
    [lib]/[@mapbox]/mapbox-gl-geocoder/lib/index.js:3:17

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:21 Object../node_modules/react-map-gl-geocoder/dist/index.js
    [lib]/[react-map-gl-geocoder]/dist/index.js:21:25

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - BaseMap.js:20 Object../node_modules/@hackoregon/component-library/dist/BaseMap/BaseMap.js
    [lib]/[@hackoregon]/component-library/dist/BaseMap/BaseMap.js:20:50

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - index.js:407 Object../node_modules/@hackoregon/component-library/dist/index.js
    [lib]/[@hackoregon]/component-library/dist/index.js:407:39

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1


  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - sync-requires.js:8 Object../.cache/sync-requires.js
    lib/.cache/sync-requires.js:8:53

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

  - static-entry.js:9 Module../.cache/static-entry.js
    lib/.cache/static-entry.js:9:22

  - bootstrap:19 __webpack_require__
    lib/webpack/bootstrap:19:1

I set up a sandbox to try to test if gatsby build errors on your example. It does error on gatsby build, but it's a different error. Not sure if it's helpful.

[SamSamskies]

Hi @benbowler, could you provide some context as to how you're trying to use this module? For example, are you using Next.js, Gatsby, etc.? If you could provide a code sample using Code Sandbox that would be even better.

[SamSamskies]

Just realized you typed pnpm and not npm. I'm actually not familiar with that package manager. Could you try loading just that suggestions package in your app using pnpm? If that doesn't work, I can file an issue with pnpm.

[chiho13]

I'm also getting this error

[SamSamskies]

Currently only npm and yarn are supported. It's currently not on my TODO list to support pnpm.

[SamSamskies]

Hi @Giboork, thanks for reporting the issue. Looks like this may require a PR into the suggestions dependency to fix this. I don't think window.Suggestions should be set if there's no window https://github.com/tristen/suggestions/blob/gh-pages/index.js#L57.

In the meantime, I might be able to figure out a way to hack around this. Not sure if I'll have time this week though.

If you want to try and fix it on your end for now, you can check out this SO for some ideas. https://stackoverflow.com/questions/38951721/react-js-server-side-issue-window-not-found

[CassiusHR]

I finally got a chance to look into this more. I found a workaround that works and is recommended by Zeit. https://github.com/zeit/next.js/wiki/FAQ

// instead of doing this
// import Geocoder from 'react-map-gl-geocoder'

// do this
let Geocoder

if (typeof window !== 'undefined') { 
  Geocoder = require('react-map-gl-geocoder').default; 
}

At some point, I'll try and make a PR to the suggestions library to only set window.Suggestions if window is not undefined. If someone else gets around to doing that before me, could you please post a comment here to let everyone know. If we can get that PR merged, we'll also need to ask mapbox-gl-geocoder if they can update their suggestions dependency.

This worked for me using Gatsby JS

[milinpaul]

For users who use next.js framework, importing mapbox-gl-geocoder dynamically will resolve the window is not defined issue.

use nextjs dynamic import from next/dynamic

[SamSamskies]

@milinpaul thanks for the tip!

Also, I have a PR (tristen/suggestions#42) open with the suggestions library to fix this error. Feel free to +1 the PR 😀

[SamSamskies]

My PR with the suggestions library has been merged! Now I need to file an issue with @mapbox/mapbox-gl-geocoder to get them to upgrade the dependency. Once they do that I can upgrade @mapbox/mapbox-gl-geocoder and close out this issue.

[SamSamskies]

Made a PR with @mapbox/mapbox-gl-geocoder to upgrade the suggestions dependency mapbox/mapbox-gl-geocoder#403