Next.js 应用程序中的 react-map-gl 图像失败

Question

我正在努力从 react-map-gl 中获取图像以用于我的 Next.js 应用程序。

为了缩小范围，我尝试移植官方文档中的示例 (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>
    );
}

这给了我以下错误，这与我在自己的应用程序中遇到的错误相同：

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

有人有意见吗？如果我删除 Image 标签，地图会加载得很好。

我对 Next.js、React 和 react-map-gl 包装器还很陌生，所以我希望它是我所缺少的真正基础的东西。

Answer 1

从 'react-map-gl' 导入图像而不使用 {}

import Image from 'react-map-gl';

Answer 2

原来我设法混淆了 react-map-gl 和 @urbica/react-map-gl。谷歌搜索示例我最终在 @urbica/react-map-gl 文档中没有注意到它是一个不同的包，并尝试使用 react-map-gl 实现他们的代码示例 - 他们没有名为 Image 的导出 :-)

Next.js 应用程序中的 react-map-gl 图像失败

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

next.js

react-map-gl