react-mapbox-gl Features don't work with NextJS

Viewed 1335

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:

mapbox-working-with-create-react-app

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"
});

mapbox-broken-nextjs

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.

0 Answers
Related