search

SamSamskies / react-map-gl-geocoder

React wrapper for mapbox-gl-geocoder for use with react-map-gl
MIT License
122 stars 29 forks source link

window is not defined #36

Open benbowler opened 5 years ago

benbowler commented 5 years ago

I'm not able to load the plugin at all via pnpm.

window is not defined
ReferenceError: window is not defined
    at Object.<anonymous> (../..//node_modules/.registry.npmjs.org/suggestions/1.6.0/node_modules/suggestions/index.js:57:1)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/./..//node_modules/.registry.npmjs.org/@mapbox/mapbox-gl-geocoder/4.1.2/node_modules/@mapbox/mapbox-gl-geocoder/lib/index.js:3:17)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
SamSamskies commented 5 years ago

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 commented 5 years ago

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.

jaronheard commented 5 years ago

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.

chiho13 commented 5 years ago

I'm also getting this error

SamSamskies commented 5 years ago

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

Giboork commented 5 years ago

getting this error while using next.js

SamSamskies commented 5 years ago

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

SamSamskies commented 5 years ago

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.

CassiusHR commented 4 years ago

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 commented 4 years ago

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 commented 4 years ago

@milinpaul thanks for the tip!

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

SamSamskies commented 3 years ago

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 commented 3 years ago

Made a PR with @mapbox/mapbox-gl-geocoder to upgrade the suggestions dependency https://github.com/mapbox/mapbox-gl-geocoder/pull/403