Leaflet: Importing Leaflet 1.5.0 fails

[marufkilic]

When using with react, leaflet 1.5.0 fails. However 1.4.0 works as expected

Code fails excatly at init function line "const map = L.map(mapName, { ..."

Class to render map

import React, { Component } from "react";

import L from "leaflet";
import { initMap } from "./init";

/**
 * @return {*} undefined
 */
export default class MapPanel extends Component {
  /**
   * @return {*} undefined
   */
  componentDidMount = () => {
    this.leftMap = initMap("lmap", "http://{s}.tile.osm.org/{z}/{x}/{y}.png");
    this.rightMap = initMap("rmap", "http://{s}.tile.osm.org/{z}/{x}/{y}.png");
  };

 render() {
    const props = this.props;
    const { job } = props;

    if (job && job.generated_polygon) this.moveWindow(job.generated_polygon);

    return (
      <div className="relative flex flex-col sm:flex-row flex-1">
        <div className="z-0 flex-1 sm:h-full" id="lmap" />
        <div className="h-1 sm:h-full sm:w-1 bg-theme-800" />
        <div className="z-0 flex-1 sm:h-full" id="rmap" />
      </div>
    );
  }
}

The init function

import L from "leaflet";

export const initMap = (mapName, url) => {
  // create map
  const map = L.map(mapName, {
    center: [49.8419, 24.0315],
    zoom: 16,
    layers: [
      L.tileLayer(url, {
        attribution:
          '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      })
    ]
  });

  return map;
};

And the error

Webpack Config

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const CleanWebpackPlugin = require("clean-webpack-plugin");

const outputDirectory = "dist";

module.exports = {
  devtool: "source-map",
  entry: ["@babel/polyfill", "./src/client/index.js", "./src/client/index.css"],
  output: {
    path: path.join(__dirname, outputDirectory),
    filename: "bundle.js"
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"]
      },
      {
        test: /\.(png|jpg|jpeg|woff|woff2|eot|ttf|svg)$/,
        loader: "url-loader?limit=100000"
      }
    ]
  },
  optimization: {
    splitChunks: {
      chunks: "all"
    }
  }
};

[cherniavskii]

@marufkilic can you publish minimal example, which reproduces the issue?

[marufkilic]

Above two classes can produce the error. It is enough to render the MapPanel component in a main React component.

[cherniavskii]

Looks like there's no default export in [email protected]

[cherniavskii]

Caused by line:

Object.defineProperty(exports, '__esModule', { value: true });

at the end of leaflet-src.

This probably changed in rollup, which we updated in #6635

[marufkilic]

Also added webpack config

[cherniavskii]

Quick workaround on users side:

- import L from 'leaflet';
+ import * as L from 'leaflet';