Parcel: Error 'Cannont find module ...png,28' loading Leaflet's CSS from node_modules

Created on 9 Mar 2018 · 3Comments · Source: parcel-bundler/parcel

This may be me doing something wrong, but I thought I'd file it regardless. I'm trying to use parcel with Leaflet via npm. I basically have this:

My index.html is basically:

<html>
  <head>
    <link rel="stylesheet" href="../node_modules/leaflet/dist/leaflet.css">
...

Parcel bundles index.html, and when I load it, I get:

css-loader.js:30 Uncaught (in promise) Error: Cannot find module 'bb720bc5f61727163f5c58c42f3b92b5.png,28'
    at newRequire (css-loader.js:30)
    at newRequire (css-loader.js:30)
    at newRequire (css-loader.js:22)
    at localRequire (css-loader.js:30)
    at css-loader.js:30
    at <anonymous>

I note that ./node_modules/leaflet/dist/images/marker-icon.png exists, as does ./dist/bb720bc5f61727163f5c58c42f3b92b5.png, which implies that parcel found it OK. In the original CSS there was this:

/* Default icon URLs */
.leaflet-default-icon-path {
    background-image: url(images/marker-icon.png);
    }

parcel turned this into:

/* Default icon URLs */
.leaflet-default-icon-path {
    background-image: url(bb720bc5f61727163f5c58c42f3b92b5.png);
    }

However, if I do parcel build index.html it works (no error) and I see:

dist/b26aea33ed977c0921f3c860d3a9bf33.js     729.58 KB    1.61s
dist/d527406cab6f7e9319b7e3c8c8973c6d.css     10.04 KB    190ms
dist/bb720bc5f61727163f5c58c42f3b92b5.png      1.43 KB    168ms
dist/69f26124ea64d9275694c4c14fd9aa78.png      1.23 KB    166ms
dist/da98e4ab39854ac577d2600712eda01f.css      1.17 KB     91ms
dist/b4c2cdd898b1881c0d3c7e254f93abc8.png        696 B    169ms
dist/index.html                                  681 B    8.82s

Bug Help Wanted Stale

Source

humphd

Most helpful comment

I had a similar issue and used the workaround I found here to make it work.

import L from 'leaflet';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

or maybe this workaround is even better.

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'),
});

jbelien on 18 Apr 2019

👍2

All 3 comments

I think that addimport 'your.css' in entry js,
and remove the <link rel="stylesheet" href="your.css"> should resolve this runtime error.

realdennis on 11 Mar 2018

I had a similar issue and used the workaround I found here to make it work.

import L from 'leaflet';

import icon from 'leaflet/dist/images/marker-icon.png';
import iconShadow from 'leaflet/dist/images/marker-shadow.png';

let DefaultIcon = L.icon({
    iconUrl: icon,
    shadowUrl: iconShadow
});

L.Marker.prototype.options.icon = DefaultIcon;

or maybe this workaround is even better.

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'),
});

jbelien on 18 Apr 2019

👍2

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.