gatsby插件-使用盖茨比v3的响应传单-生成错误

Question

我找不到任何信息，无论盖茨比插件反应传单(为盖茨比v2制作)是否与盖茨比v3兼容，我也找不到任何关于我得到的构建错误的信息。我已经尝试了所有的方法，如检查窗口是否已定义、useHasMounted等，但没有任何工作。似乎与这个版本的插件盖茨比。任何信息都会很好。

当我试图构建时，我会发现这些错误：

​

​

这是我的完整代码，如果我删除了MapContainer及其中的所有内容，盖茨比构建就没有问题。

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

我也找不到关于我得到的构建错误的任何信息。

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

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

使用Node14.x解决了这个问题，并将包版本降级为2.7.0，该版本公开了Map而不是MapContainer包装器。