Leaflet custom icon, react-leaflet, can't build Gatsby project - leaflet

Question

I've got custom icons working in my Leaflet map just fine when I run gatsby develop locally, but when I try to build I get an error related to my custom marker icon:
WebpackError: TypeError: leaflet_src_layer_marker__WEBPACK_IMPORTED_MODULE_4__.Icon is not a constructor
Related imports:
import { Map, Marker, Popup, TileLayer, Tooltip, ZoomControl } from 'react-leaflet'
import { Icon } from 'leaflet/src/layer/marker'
Create custom icon:
// Init custom map icon
const mapIcon = MapIcon();
const markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
JSX:
{ markerData.length > 0 ? markerData.map((node, index) => (
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={markerIcon}>
<Popup className="leaflet-popup" onOpen={(el) => openPopup(el)}>
<h5 className="popup-location-title">{node.location_title}</h5>
<h6 className="popup-address">{node.address}</h6>
<div className="popup-description" dangerouslySetInnerHTML={{ __html: node.description }}></div>
{!!node.embed ?
<div className="popup-embed">
<Embed url={node.embed} className="popup-media-embed" />
</div>
: null}
</Popup>
<Tooltip className="leaflet-tooltip">
<span className="title">{node.location_title}</span>
<span className="address">{node.address}</span>
</Tooltip>
</Marker>
)) : null }
I've tried all the solutions listed here: https://github.com/Leaflet/Leaflet.markercluster/issues/874. I've also looked at several similar questions. Nothing seems to help. For instance, I also tried importing leaflet like so import * as L from "leaflet" and like so import L from "leaflet". And then creating the new icon like so const markerIcon = L.Icon({, like so const markerIcon = L.icon({, like so const markerIcon = new L.Icon({, and like so const markerIcon = new L.icon({. I can console.log(L), but none of these works.
I would love some assistance.

Answer 1

Got it to build. I had to wrap the icon construction in a check for the window obj:
// Init custom map icon
if (typeof window !== 'undefined') {
const mapIcon = MapIcon();
markerIcon = new Icon({
iconUrl: mapIcon,
iconSize: [36, 36],
iconAnchor: [18, 18],
shadowSize: [36, 36],
shadowUrl: 'https://unpkg.com/leaflet#1.5.1/dist/images/marker-shadow.png',
shadowAnchor: [10, 18],
popupAnchor: [0, -16],
tooltipAnchor: [13, -4]
});
}
And again when passing the icon to the marker:
<Marker position={[node.coords.lat, node.coords.lng]} key={`marker-${index}`} icon={(!!markerIcon) ? markerIcon : null}>