Reports

I can re-open this, I tried NetJs 15 + React leaflet 5 and get the marker problem without find a workaround with leaflet compatibility:

./node_modules/leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css:12:10
Module not found: Can't resolve '~leaflet/dist/images/marker-shadow.png'
  10 |  background-image: url(~leaflet/dist/images/marker-shadow.png); /* normal[, Retina] */
  11 |  cursor: url(~leaflet/dist/images/marker-shadow.png), auto; /* normal[, Retina], auto */
> 12 |  width: 41px;
     |          ^
  13 |  height: 41px;
  14 |  margin: -41px -12px; /* margin top and left to reversely position shadowAnchor */
  15 |  }

Here is the import on top of the file:

import "leaflet/dist/leaflet.css";


import "leaflet-defaulticon-compatibility";
import "leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css";
// END: Preserve spaces to avoid auto-sorting
import { MapContainer, Marker, Popup, TileLayer } from "react-leaflet";

page.tsx is our main server component, importing two separate client component as your example above...

Any advice without creating our proper marker ?

79468684