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

Question

I can't find any information wether the gatsby-plugin-react-leaflet (made for gatsby v2) is compatible with gatsby v3 or not, nor can I find any info on the build errors I get. I have tried everything ie checking if the window is defined, useHasMounted etc and nothing works. Seems to be something with this version of the plugin for gatsby. Any info would be great.

I get these errors when trying to build:

This is my the full code, if I remove the MapContainer and everything in it, Gatsby builds without problem.

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.

It should be compatible with v3 according to this GitHub thread where the author's pointed out the backward compatibility with v3 and v4. Try using the latest version: 3.0.3

Without further implementation details, I don't know what can be the cause of the issue.

---

The issue has been solved using Node 14.x and downgrading the package version to 2.7.0, a version that exposes Map instead of MapContainer wrapper.