mapbox-gl-geocoder prevent server side rendering on Node by eagerly using browser api

[wratte]

It seems that mapbox-gl-geocoder is using "suggestions" that eagerly use browser API. This prevent Node to server side render.

ReferenceError: window is not defined at Object. ((mypath)\suggestions\index.js:59:1) at Module._compile (internal/modules/cjs/loader.js:799:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:810:10) at Module.load (internal/modules/cjs/loader.js:666:32) at tryModuleLoad (internal/modules/cjs/loader.js:606:12) at Function.Module._load (internal/modules/cjs/loader.js:598:3) at Module.require (internal/modules/cjs/loader.js:705:19) at require (internal/modules/cjs/helpers.js:14:16) at Object. ((mypath)\node_modules@mapbox\mapbox-gl-geocoder\lib\index.js:3:17) at Module._compile (internal/modules/cjs/loader.js:799:30)

[andrewharvey]

I think it's okay to accept a PR which checks for window, but still I think a better solution is setup your code to not try and render mapbox-gl-geocoder on the server. I use nuxt quite a bit and you can configure it to skip server side rendering for some components.

[wratte]

The fact is there is no use of mapbox-gl-geocoder on the server side. There is a library that imports it. This cause error on compilation. To temporarily fix the problem, I had to remove this line of code from suggestions lib.

//window.Suggestions = module.exports = Suggestions;

[antony]

To make a proper PWA, it's always reasonable for components to render on the server-side, otherwise you get a "flash" where there is no search field, and then it appears at runtime. It's ugly.

If this is a quick fix, I'd recommend doing this window check, and making this component render (visually) server-side.

I too used to use Nuxt, @andrewharvey and one of the reasons I dropped it is the amount of plugins which claimed to be "SSR Compatible" by just conditionally not-rendering on the server-side.

Now I'm firmly in the Sapper world, and it's a refreshing change to see that most components/plugins work without issue on the server-side, and will render there.

I've actually made a mapbox plugin for Sapper, but I have to dynamically load the Javascript at runtime in the client, due to this issue.

It's a real shame if SSR is prevented by a one-liner. If that's the only issue, I'd be happy to open a PR for a fix. @wratte ?

[andrewharvey]

It's a real shame if SSR is prevented by a one-liner. If that's the only issue, I'd be happy to open a PR for a fix. @wratte ?

I'm not against this, I can try and help review a PR (but I'm not a JS expert and this is all getting a bit outside of my knowledge) if you wanted to put one together.

[AbeCole]

I'm having a similar issue using this with Gatsby. Is there any action to resolve this in progress? Or any workaround?

[janosh]

Even after wrapping MapboxGeocoder in an onMount callback in a SvelteKit project, I'm still getting this error

index.js:63 Uncaught (in promise) TypeError: EventEmitter is not a constructor
    at new MapboxGeocoder (index.js:63)
    at AutoCompletePlace.svelte? [sm]:17
    at run (index.mjs?v=cae373d7:18)
    at Array.map (<anonymous>)
    at index.mjs?v=cae373d7:1427
    at flush (index.mjs?v=cae373d7:746)
    at init (index.mjs?v=cae373d7:1515)
    at new Root (root.svelte? [sm]:16)
    at createProxiedComponent (svelte-hooks.js:245)
    at new ProxyComponent (proxy.js:241)

[liamssi]

@janosh am facing the same problem here, did you find any solution?!

[antony]

Have a look at the @beyonk/svelte-mapbox project. I recently rewrote it using actions (and it's all svelte kit) so you can see it in action.

On Sat, 31 Jul 2021 at 14:32, Belghit Ismail @.***> wrote:

@janosh https://github.com/janosh am facing the same problem here, did you find any solution?!

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/mapbox/mapbox-gl-geocoder/issues/366#issuecomment-890349423, or unsubscribe https://github.com/notifications/unsubscribe-auth/AABVORKXP5HU32KTZEX5ITTT2P3O3ANCNFSM4N75SFIA .

--

---

ꜽ . antony jones . http://www.enzy.org

[liamssi]

@janosh am facing the same problem here, did you find any solution?!

Installing events via npm fixed the problem for me : npm install events