React Leaflet marker icon isn't showing my next.js app

Question

I am using react leaflet my next.js app.React Leaflet marker is broken see image. I am using custom market but not work. I 've put together a very simple React / Leaflet demo but the marker icon is not showing at all

import { useState, useEffect, useRef } from "react";
import "leaflet/dist/leaflet.css";
import {
  MapContainer,
  TileLayer,
  Marker,
  Popup,
  useMap,
  useMapEvents,
} from "react-leaflet";
import { useSelector } from "react-redux";
import { useCallback } from "react";
import { useMemo } from "react";


function LocationMarker({ lat, lng }) {
  const [position, setPosition] = useState(null);
  const [bbox, setBbox] = useState([]);
  const map = useMap();

  useEffect(() => {
    map.flyTo([lat, lng], map.getZoom());
  }, [lat]);

  return position === null ? null : (
    <Marker position={position}>
      <Popup>You are here</Popup>
    </Marker>
  );
}

export default function EditAddedMap({ lat, lng, setLat, setLng }) {
  const { resturant } = useSelector((state) => state);

  return (
    <MapContainer center={[lat, lng]} zoom={13} scrollWheelZoom={false}>
      <TileLayer
        attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
        url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
      />
      <LocationMarker lat={lat} lng={lng} />
      <DraggableMarker lat={lat} lng={lng} setLng={setLng} setLat={setLat} />
    </MapContainer>
  );
}

Answer 1

Try to install leaflet-defaulticon-compatibility found here https://www.npmjs.com/package/leaflet-defaulticon-compatibility

And import it accordingly:

import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.css";

Answer 2

This worked for me on nextjs with react-leaflet

import L from 'leaflet';
import markerIcon2x from 'leaflet/dist/images/marker-icon-2x.png';
import markerIcon from 'leaflet/dist/images/marker-icon.png';
import markerShadow from 'leaflet/dist/images/marker-shadow.png';

delete L.Icon.Default.prototype._getIconUrl;
L.Icon.Default.mergeOptions({
    iconUrl: markerIcon.src,
    iconRetinaUrl: markerIcon2x.src,
    shadowUrl: markerShadow.src,
})

Source: https://github.com/PaulLeCam/react-leaflet/issues/808#issuecomment-977109769