Cannot import leaflet-ui using webpack/npm

[stefanroeck]

My package.json:

"dependencies": {
    "leaflet": "^1.9.3",
    "leaflet-ui": "^0.6.0"
  }

My code index.js:

import * as L from 'leaflet';
import 'leaflet-ui';
import 'leaflet/dist/leaflet.css';

const map = L.map('map', {
  mapTypeId: 'topo',
  mapTypeIds: ['streets', 'terrain', 'satellite', 'topo'],
});

My webpack.config.js:

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  }
};

The error when running webpack serve:

Compiled with problems:X

WARNING in ./node_modules/leaflet-ui/src/leaflet-ui.js 31:24-37

Should not import the named export 'version'.'split' (imported as 'version') from default-exporting module (only default export is available soon)

Is this supported or do I have to link the JS/CSS from a CDN?

[Raruto]

Hi @stefanroeck,

I usually don't use bundlers (at least for basic projects..), if you import from the dist folder do you get the same issue?

I think it should be something like the following:

import '../node_modules/leaflet-ui/dist/leaflet-ui-src.js';

👋 Raruto

[stefanroeck]

Hi, yes I got it working when using

import 'leaflet-ui/dist/leaflet-ui-src';

I also had to add a dependency to url package, as there seems to be a

require('url');

in the leaflet-ui code. Thanks for your assistance ;-)