带有 gatsby v3 的 gatsby-plugin-react-leaflet - 构建错误

Question

我找不到任何关于 gatsby-plugin-react-leaflet（为 gatsby v2 制作）是否与 gatsby v3 兼容的信息，也找不到关于我得到的构建错误的任何信息。我已经尝试了所有方法，即检查是否定义了 window、useHasMounted 等，但没有任何效果。似乎与此版本的 gatsby 插件有关。任何信息都会很棒。

我在尝试构建时遇到这些错误：

这是我的完整代码，如果我删除 MapContainer 和其中的所有内容，Gatsby 构建没有问题。

import { Link, Icon } from "@myCompany/components";
import L from "leaflet";
import PropTypes from "prop-types";
import React, { useEffect, useState } from "react";
import { MapContainer, Marker, TileLayer } from "react-leaflet";
import { useFetch } from "use-http";

import pin from "../images/pin.svg";

import * as defaultStyles from "./Map.module.css";

Map.propTypes = {
  styles: PropTypes.objectOf(PropTypes.string),
  address: PropTypes.string,
  street: PropTypes.string,
  zip: PropTypes.string,
  city: PropTypes.string,
};

export default function Map({
  styles = defaultStyles,
  address,
  street,
  zip,
  city,
}) {
  const [coordinates, setCoordinates] = useState([0, 0]);
  const [loading, setLoading] = useState(true);
  const { get, error } = useFetch(
    `https://nominatim.openstreetmap.org/search?q=${address}&format=json`,
  );

  const getCoordinates = async () => {
    const response = await get();
    if (response && response.length) {
      const { lat, lon } = response[0];
      setCoordinates([Number(lat), Number(lon)]);
      setLoading(false);
    }
  };

  useEffect(() => {
    getCoordinates();
  }, []);

  if (loading) {
    return null;
  }

  if (error) {
    return null;
  }

  if (typeof window !== "undefined") {
    const pinIcon = new L.Icon({ iconUrl: pin, iconSize: new L.Point(32, 38) });
    return (
      <div className={styles.component}>
        <MapContainer
          center={coordinates}
          zoom={17}
          className={styles.map}
          zoomControl={false}
          attributionControl={false}
        >
          <TileLayer url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" />
          <Marker
            position={coordinates}
            className={styles.marker}
            icon={pinIcon}
          />
        </MapContainer>
        <Link
          to={`https://www.google.com/maps/search/?api=1&query=${street}, ${zip} ${city}}`}
          target="_blank"
          showExternalIcon={false}
          className={styles.link}
        >
          <Icon name="map" />
        </Link>
      </div>
    );
  }
  return null;
}

Answer 1

nor can I find any info on the build errors I get.

根据这个 GitHub thread 它应该与 v3 兼容，其中作者指出了与 v3 和 v4 的向后兼容性。尝试使用最新版本：3.0.3

没有进一步的实施细节，我不知道问题的原因是什么。

问题已通过使用 Node 14.x 并将包版本降级到 2.7.0 解决，该版本公开了 Map 而不是 MapContainer 包装器。

带有 gatsby v3 的 gatsby-plugin-react-leaflet - 构建错误

gatsby-plugin-react-leaflet with gatsby v3 - build error

gatsby

react-leaflet