如何在 gatsby 站点上加载 Mapbox？尽管在开发模式下工作，但构建成功但地图不显示

Question

我正在尝试在 gatsby 网站上使用 Mapbox 地图。我使用了他们的 React Mapbox 教程中的代码：https ://docs.mapbox.com/help/tutorials/use-mapbox-gl-js-with-react/并将其放入地图组件中。

我在页脚上调用地图组件，它在开发模式下运行良好，但是当我运行时gatsby build，gatsby serve尽管显示了容器，但它拒绝显示地图：

https://postimg.cc/mPcRfYhV

我也尝试过来自文档的另一个建议，即在 gatsby-node.js 中使用

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@mapbox|mapbox-gl/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}

对于我尝试使用的测试属性，/mapbox|@mapbox|mapbox-gl|mapboxgl/但似乎没有什么使它像在开发模式下那样工作。

有任何想法吗？

组件：

import React, { useEffect, useRef, useState } from "react";
import mapboxgl from 'mapbox-gl';
import "mapbox-gl/dist/mapbox-gl.css";

const styles = {
  width: "220px",
  height: '130px',
  margin: '2em 0'
};


const Map = () => {


  const [map, setMap] = useState(null);
  const mapContainer = useRef(null);

  useEffect(() => {

    mapboxgl.accessToken = process.env.MY_KEY
    const initializeMap = ({ setMap, mapContainer }) => {
      const map = new mapboxgl.Map({
        container: mapContainer.current,
        style: "mapbox://styles/mapbox/streets-v11", 
        center: [-6.2603, 53.3498],
        zoom: 9
      });

      map.on("load", () => {
        setMap(map);
        map.resize();
      });
       new mapboxgl.Marker({color:'#1E3873'}).setLngLat([-6.2603, 53.3498]).addTo(map)

    };

    if (!map) initializeMap({ setMap, mapContainer });
  }, [map]);


  return <div ref={el => (mapContainer.current = el)} style={styles} />;



};

export default Map;

Map 组件以正常方式在页脚组件上调用，只需导入组件并使用<Map />.

使用时它工作正常的图片 gatsby develop

使用时不工作的图片 gatsby build gatsby serve

解决方案编辑：由于某种原因，mapbox-gl 2.0 不起作用，或者我无法让它工作。其他人也有同样的问题，并建议对他们有用的方法是使用 mapbox-gl 1.13.0 。我试过了，它有效。

npm uninstall mapbox-gl

npm i mapbox-gl@1.13.0

保持其他配置相同，它应该可以工作。

Answer 1

由于某种原因，mapbox-gl 2.0 无法正常工作。其他人也有同样的问题，并建议对他们有用的方法是使用 mapbox-gl 1.13.0 。我尝试过并且有效。

npm uninstall mapbox-gl

npm i mapbox-gl@1.13.0

请记住在中使用以下代码gatsby-node.js：

exports.onCreateWebpackConfig = ({ stage, loaders, actions }) => {
  if (stage === "build-html") {
    actions.setWebpackConfig({
      module: {
        rules: [
          {
            test: /@mapbox|mapbox-gl/,
            use: loaders.null(),
          },
        ],
      },
    })
  }
}