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.
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 :-)