React-mapbox-gl: Using ReactMapboxGl with next.js (isomorphic)

[jonheslop]

I’m new to react and am trying to string together ReactMapboxGl with Next.js and it errors onload as ReactMapboxGl can't load server side (errors with ReferenceError: self is not defined) but then works on subsequent hot reloads.

I’ve tried using require() within componentDidMount but get an error like this

Module build failed: TypeError: /components/mapLoader.js: Property name of JSXOpeningElement expected node to be of a type ["JSXIdentifier","JSXMemberExpression"] but instead got "Identifier"

I’m sure there's just something up with my implementation but I am struggling to work out why? My whole repo is here — https://github.com/jonheslop/colwiki/

Any tips would be greatly appreciated, thanks :D

[aleksplus]

@jonheslop i'm dropped idea to render map on server-side because of such issues, instead render map only on client-side. it is a problem with mapbox-gl-js, not with this package. just search webpack related issues.

this issue can be related to WebWorker's

p.s. other problem is a browsers with lack of WebGl support. i'm thinking about fallback to react-leaflet for such use-cases.

[jonheslop]

@aleksplus thanks for the info. Will look into sorting it with webpack. Re WebGL: noted, this project is just for fun so I am not worried about support at the mo.

[karloluis]

Did anyone find a way to make this package work with Nextjs?
I have not been able to find a relevant related issue on webpack.

[alexpriceco]

Also coming in with an issue getting this to work on Next.js. @karloluis, were you able to find a workaround?

[cherniavskii]

I think it can be resolved with dynamic imports now - see https://github.com/zeit/next.js#dynamic-import

[cjjenkinson]

Dynamic imports work for me

[qlerebours]

Hi @cjjenkinson and @cherniavskii
Can you share some code that works for you please ?
I tried but I still have issues

Thanks

[qlerebours]

I finally succeed with:

import React from 'react'
import dynamic from 'next/dynamic'
const Map = dynamic(() => import('../config/mapbox'), {
  ssr: false
});

export default class extends React.Component {
  render() {
    return (
      <Map style="mapbox://styles/mapbox/streets-v9" />
    )
  }
}

and config/mapbox.js file:

import ReactMapboxGl from 'react-mapbox-gl'

export default ReactMapboxGl({
  accessToken: "pk....."
});

Hope it'll help

[leerob]

I also stumbled on this and ended up writing a blog post on how to use Mapbox with Next.js.

You can find a working example and full code here.

[qlerebours]

Thanks for writing this post and sharing the solution !
Note that you will have a "loading..." message while your component is dynamically imported, that you can replace with your custom loader thanks to:

const Map = dynamic(() => import('../config/mapbox'), {
  ssr: false,
  loading: () => <MyLoader />
});

[hassantauqeer]

And please remember in dynamic imports CSS loads after the page gets rendered on client-side, and it'll take the time that might result in just HTML structure for a second and then CSS loads completel making the page lookg Perfect. To overcome this import you CSS in the Parent component where dynamically exported component is used.

<Layout>
        <MapBox />
</Layout>

The Layout contains all the CSS, it loads it and MapBox is a dynamic component that gets rendered on client-side til then css is loaded.

[storrisi]

Anyone has still problems here? I followed the example from @leerob (which actually use react-map-gl) , but the Map doesn't render anymore on the client.

[leerob]

Appears to still be working for me 👍

https://next-mapbox-demo.now.sh/
https://github.com/leerob/next-mapbox-demo

[storrisi]

Thanks @leerob, you are using react-map-gl , there's any known difference between that and react-mabpox-gl ?

[DibakarHalder]

How to use fitbounds and other apis. Can't seem to find a solution

[neighborhood999]

Add css-loader in your next.config:

module.exports = {
  webpack(config) {
    /* other config settings... */

    config.module.rules.push({
      test: /\.css$/,
      loader: ['style-loader', 'css-loader']
    });

    return config;
  }
};

[aaronrmiller]

@neighborhood999, @qlerebours,

i am new to next.js and still getting: Read more: https://err.sh/next.js/css-npm
Location: node_modules/react-mapbox-gl/lib-esm/map.js

https://codesandbox.io/s/react-mapbox-gl-nextjs-qs1q1

i have tried both of your solutions, i am curious if there is anything i am missing. codesandbox above if you would like to see the code i am using.

[daniofilho]

If anyone is interested, this is my woraround to make Mapbox work with NextJS:

https://github.com/daniofilho/mapbox-with-react-nextjs-example

[jamesthesken]

@daniofilho looks great! I'm new to NextJS, are you still using ssr to display the map?

[daniofilho]

@daniofilho looks great! I'm new to NextJS, are you still using ssr to display the map?

Thank you! Yes, this code is in production already on a project I'm working on.

[jamesthesken]

@daniofilho One other question, what was difficult about your workaround? my goal is to get this example working with Next, just hope it isn't a long rabbit hole: https://visgl.github.io/react-map-gl/examples/heatmap

[daniofilho]

@daniofilho One other question, what was difficult about your workaround? my goal is to get this example working with Next, just hope it isn't a long rabbit hole: https://visgl.github.io/react-map-gl/examples/heatmap

Actually, the map is only loaded in the front, I ignore the map on ssr. This is my workaround to do it, sorry if I made myself unclear. It's not a problem with NextJS itself, it's just that mapbox needs to be on the browser and can't run on server side.

I've never tried this specific api that you are trying, but I think you can do it it if you start from my example and then implement the features using my point of view.

[quickshiftin]

I've looked at these suggestions using NextJS dynamic imports, however none of them are using Layer and Feature components from the react-mapbox-gl library, and even when using the dynamic import, they still are not working...

The closest to a working solution is from @daniofilho but it relies on hooks to display the marker, hence defeating the purpose of react-mapbox-gl...

See my Stackoverflow thread here for more details.

[quickshiftin]

After seeing the note from @storrisi that the example from @leerob was using a different library, react-map-gl. Sad that the solution is to use a different library, but there you have it. The guide from @leerob is working well.