search

brev / esm-loaders

ESModule Loaders Monorepo
16 stars 4 forks source link

bug(esm-loader-css): incorrect resolution of css paths from NPM packages #10

Open maxpatiiuk opened 6 months ago

maxpatiiuk commented 6 months ago

As per several guides, using Leaflet with Webpack requires the following import:

import 'leaflet/dist/leaflet.css';

The above path should be resolved relative to the node_modules directory (works correctly with style-loader in webpack), but, in esm-loader-css, it is instead resolved relative to the current directory (which is wrong, as the path does not begin with ./), leading to this error:

node:internal/process/esm_loader:34
      internalBinding('errors').triggerUncaughtException(
                                ^
[Error: ENOENT: no such file or directory, open '/Users/maxpatiiuk/site/python/specify7/specifyweb/frontend/js_src/lib/components/Leaflet/leaflet/dist/leaflet.css'] {
  errno: -2,
  code: 'ENOENT',
  syscall: 'open',
  path: '/Users/maxpatiiuk/site/python/specify7/specifyweb/frontend/js_src/lib/components/Leaflet/leaflet/dist/leaflet.css'
}

same applies for Leaflet plugins:

import 'leaflet.markercluster/dist/MarkerCluster.css';
import 'leaflet.markercluster/dist/MarkerCluster.Default.css';

Workaround for now is to explicitly spell out the path relative to node_modules in my import:

import '../../../node_modules/leaflet/dist/leaflet.css';