I'm trying to use react-mapbox-gl with NextJS. Just trying to get the demo working, a map with a single Feature...
If I try the recommended boilerplate (based on create-react-app) for debugging purposes, it works just fine:
However when I go for a boilerplate with NextJS, the map renders with no Feature.
pages/index.js
import React from 'react';
import dynamic from 'next/dynamic';
import { Layer, Feature } from 'react-mapbox-gl';
import 'mapbox-gl/dist/mapbox-gl.css';
const Map = dynamic(() => import('../lib/mapbox'), {
ssr: false
});
function HomePage() {
return (
<Map
center={[-104.989713, 39.730212]}
style="mapbox://styles/mapbox/streets-v9"
containerStyle={{
height: '100vh',
width: '100vw'
}}
>
<Layer type="circle" id="marker" paint={{
'circle-radius': 50,
'circle-color': '#E54E52',
'circle-opacity': 1,
}}>
<Feature coordinates={[-104.995210, 39.754684]} />
</Layer>
</Map>);
}
export default HomePage;
lib/mapbox.js
import ReactMap from 'react-mapbox-gl';
export default ReactMap({
accessToken: "pk.eyJ1IjoiZmFicmljOCIsImEiOiJjaWc5aTV1ZzUwMDJwdzJrb2w0dXRmc2d0In0.p6GGlfyV-WksaDV_KdN27A"
});
I found this closed thread on using react-mapbox-gl with NextJS. They explain how to use NextJS Dynamic Imports, however it seems like this does not fix the problem.

