Solvedreact leaflet Map <Marker> image does not appear on Next.js

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

15 Answers

✔️Accepted Answer

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={...} />

Other Answers:

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.

kud
54

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: "😁",
          })}
        >

More Issues: