Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Importing Leaflet 1.5.0 fails

See original GitHub issue

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"
    }
  }
};

Issue Analytics

State:
Created 4 years ago
Comments:6

Top GitHub Comments

4reactions

cherniavskiicommented, May 8, 2019

Quick workaround on users side:

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

0reactions

marufkiliccommented, May 8, 2019

Also added webpack config

Top Results From Across the Web

Using Leaflet map with Typescript, unable to import Leaflet ...

I'm currently trying to load a Leaflet map in a personal project. but my code does not execute because of an import problem....

@types/leaflet - npm

This package contains type definitions for Leaflet.js (https://github.com/Leaflet/Leaflet). Details. Files were exported from https://github.com ...

Download - Leaflet - a JavaScript library for interactive maps

Leaflet is available on the following free CDNs: unpkg, cdnjs, jsDelivr. Disclaimer: these services are external to Leaflet; for questions or support, please ......

Create Interactive Web Maps with the JavaScript 'Leaflet' Library

Description Create and customize interactive maps using the 'Leaflet'. JavaScript library and the 'htmlwidgets' package. These maps can be used directly from ...

Leaflet control window is not a function - GIS Stack Exchange

This simply means that Leaflet library is not loaded because it's not where you are referencing it in your `<script src=... ></scipt> statement....