React-leaflet: Map <Marker> image does not appear on Next.js

[MathisBarre]

Expected behavior

When I import my leaflet map in react with dynamic import (required with Next.js), I want the marker images to be display.

Actual behavior

Instead of expected behavior, the marker icon doesn't appear.
When I inspect the images with devtools here is the src I get for the image :
http://localhost:3000/_next/static/media/marker-icon.2b3e1faf89f94a4835397e7a43b4f77d.png")marker-icon.png

Here is my actuel dependencies:

 "dependencies": {
    "@mdx-js/loader": "^1.6.21",
    "@next/mdx": "^10.0.2",
    "@tailwindcss/typography": "^0.3.1",
    "ackee-tracker": "^4.2.0",
    "autoprefixer": "^10.0.2",
    "dayjs": "^1.9.6",
    "leaflet": "^1.7.1",
    "next": "10.0.3",
    "postcss": "^8.1.9",
    "postcss-flexbugs-fixes": "^5.0.2",
    "postcss-preset-env": "^6.7.0",
    "react": "17.0.1",
    "react-dom": "17.0.1",
    "react-leaflet": "^3.0.4",
    "react-select": "^3.1.1",
    "sass": "^1.29.0",
    "tailwindcss": "^2.0.2"
  },

I've tried this fix found in another old github issue :

import L from 'leaflet';

delete L.Icon.Default.prototype._getIconUrl;

L.Icon.Default.mergeOptions({
    iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
    iconUrl: require('leaflet/dist/images/marker-icon.png'),
    shadowUrl: require('leaflet/dist/images/marker-shadow.png')
});

But unfortunately, it result to a compile error :

./node_modules/leaflet/dist/images/marker-shadow.png 1:0
Module parse failed: Unexpected character '�' (1:0)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)

Steps to reproduce

You can clone this repository to reproduce the issue easily : https://github.com/MathisBarre/leaflet-icon-issue
Otherwise you just need to dynamically import a leaflet map in nextjs

[kud]

Same here.

[kunKun-tx]

https://github.com/ghybs/leaflet-defaulticon-compatibility
this one seems fix the issue for me.

[kud]

Interesting, thanks

For the moment I did this:

<Marker
          position={[51.505, -0.09]}
          icon={L.divIcon({
            iconSize: [size, size],
            iconAnchor: [size / 2, size + 9],
            className: "mymarker",
            html: "😁",
          })}
        >

[MathisBarre]

https://github.com/ghybs/leaflet-defaulticon-compatibility
this one seems fix the issue for me.

Looks like it's working well ! Thanks !

[antoinerousseau]

No need for extra libs!

Simply create a PNG icon (64x64px in my case), put it in /public, and then create an icon instance:

import { icon } from "leaflet"

const ICON = icon({
  iconUrl: "/marker.png",
  iconSize: [32, 32],
})

and use it like this:

<Marker icon={ICON} position={...} />

[kud]

Yessssss, this is better than using the global variable L

[silviuburceadev]

The workarounds are nice, but for default behavior, i.e. showing the default Leaflet marker icon, it should work out of the box. Since we're talking about React here, which most of us use with webpack (via CRA), it should work to just import the CSS from app code, not imported from a CDN (as in the setup guide code) or at least put a warning in the docs, saying that Leaflet CSS doesn't play nice with webpack and you have to do this and that.

[antoinerousseau]

I just import "leaflet/dist/leaflet.css" but yeah for the marker a working default would be nice

[jhackett1]

this seems to still be broken :(

[MathisBarre]

this seems to still be broken :(

That's true but the workaround are still valid

[kud]

Yeah https://github.com/PaulLeCam/react-leaflet/issues/808#issuecomment-747719927 is really cool. :)

You can create an intermediary component which injects this ICON.