Next.js: Exclude specific component from server-side bundle, keep only on the client

[MindRave]

Hello there!

I'm facing the problem of rendering maps in a Next application. Specifically Mapbox (haven't tried Google maps yet, although I'm hearing the same issues persist).

The issue is pretty simple: rendering a map component client-side only. Something that is easily achieved in a regular React app by just importing the component and rendering it.

Using 'react-mapbox-gl', I am getting quite a few issues. Window (first and foremost), then imports from the component's dependencies that rely on client-side features.

Mounting the component in componentDidMount is not working (throws the same 'window' errors on initial mount -- and is really ugly...). Tracking something like 'isServer' in the getInitialState yields no results whatsoever (don't remember the exact error but I think it just renders nothing at all). Using the component isn't working because the dependencies of the imported Map component are getting bundled anyway, and they need the client (so it throws). Tried with other components as well (Uber's 'react-map-gl' for example), getting the same result.

I don't have an example to show you because it's just a new barebones next app with the 'react-mapbox-gl' component imported in index.js (or 'react-map-gl'). That's all. 😞 From reading around I'm getting the impression that rendering maps server-side appears to be an issue generally.

Looking for any solutions to this. I've looked all over the issues in the repo, and found the suggestions I tried above. Maybe (and probably) it's just me doing something wrong.

Thank you in advance! The library itself rocks! 👍

[fionawhim]

For libraries like mapbox I've been using:

let mapbox = null;
if (process.browser) {
  mapbox = require('mapboxgl');
}

Then just write your component conditionalized on whether mapbox has a value or not.

[sedubois]

also see https://github.com/zeit/next.js/tree/v3-beta/examples/progressive-render

[khrome83]

@MindRave - The example @sedubois links to uses a component to wrap your component in. This ensures that the server does not render it. This way you do not need to worry about conditionally if the component should process and run or not. It also has a mechanic for loading graphic/component display which is nice.

[timneutkens]

Also, the new dynamic imports have a no srr option: https://github.com/zeit/next.js/blob/v3-beta/examples/with-dynamic-import/pages/index.js#L14

[khrome83]

@timneutkens that is a cool solution. But for now only good for those that can upgrade to the v3 beta.

Out of curiosity, in the example above, using the dynamic import, would you just validate that the const is set? That does not seem as clean as wrapping the JSX in the <nossr> component. Do you see a reason to use this over the <nossr>.

[MindRave]

Ended up using the dynamic import option from the v3 beta. 'Edge' project, so I don't mind. Works like a charm. Thank you! 👍

As for the NoSSR, as noted in my original post, I tried it and it didn't work for me. It appears that the Mapbox component was importing stuff that required window all over the place and the compiler simply crashed on import every time. Checking the 'process.browser' with 'require(...)' as suggested by @finneganh worked, but I went with the 'dynamic' import in the end. 😉

[timneutkens]

@MindRave awesome 👌

[lightninglu10]

@finneganh where are you putting that piece of code? I tried that and I find that my component is always null.

[fionawhim]

@lightninglu10 That code is for the library, not the component.

[lightninglu10]

@finneganh Oh.. Do you know if this method works for importing local components?

[fionawhim]

I haven't tried.

On Fri, Mar 9, 2018 at 12:55 PM, Patrick Lu [e-mail]
wrote:

@finneganh https://github.com/finneganh Oh.. Do you know if this method
works for importing local components?

—
You are receiving this because you were mentioned.
Reply to this email directly, view it on GitHub
https://github.com/zeit/next.js/issues/2144#issuecomment-371891972, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AAP65QaDYWmIfW0qUpOzhUXxz66B4nhaks5tcsH3gaJpZM4NuN4h
.