next.jsreact-map-gl

Image of react-map-gl fails in Next.js application


I am struggling getting Image from react-map-gl to work with my Next.js application.

To narrow it down, I have tried to port over the example from the official documentation (https://urbica.github.io/react-map-gl/#/Components/Image):

import { useState } from 'react';
import MapGL, { Source, Layer, Image } from 'react-map-gl';
import 'mapbox-gl/dist/mapbox-gl.css';

const MAPBOX_ACCESS_TOKEN = 'redacted';
export default function MapDetails(props) {
    const [viewport, setViewport] = useState({
        latitude: 37.753574,
        longitude: -122.447303,
        zoom: 13
      });
      
      const data = {
        type: 'FeatureCollection',
        features: [
          {
            type: 'Feature',
            properties: {},
            geometry: {
              type: 'Point',
              coordinates: [-122.45, 37.75]
            }
          }
        ]
      };
      
      const imageURL = 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/60/Cat_silhouette.svg/400px-Cat_silhouette.svg.png';
    return (
        <MapGL
        style={{ width: '100%', height: '400px' }}
        mapStyle='mapbox://styles/mapbox/light-v9'
        mapboxAccessToken={MAPBOX_ACCESS_TOKEN}
        onViewportChange={setViewport}
        {...viewport}
      >
        <Source id='point' type='geojson' data={data} />
        <Image id='my-image' image={imageURL} />
        <Layer
          id='image-layer'
          type='symbol'
          source='point'
          layout={{
            'icon-image': 'my-image',
            'icon-size': 0.25
          }}
        />
      </MapGL>
    );
}

This is giving me the below error, which was the same I got in my own application:

Unhandled Runtime Error
Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `MapDetails`.

Warning: React.jsx: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at map.js:37

Does anyone have any input? If I remove the Image tag, the map loads just fine.

I am pretty new to Next.js, React and the react-map-gl wrapper, so I am hoping that it is something really basic that I am missing.


Solution

  • Turns out I somehow managed to mix up react-map-gl and @urbica/react-map-gl. Googling for examples I ended up in the @urbica/react-map-gl docs without noticing it was a different package, and tried to implement their code samples with react-map-gl - and they do not have an export called Image :-)