question-mark
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.

Locally built leaflet package does not initialize correctly

See original GitHub issue

Checklist

  • I’ve looked at the documentation to make sure the behavior isn’t documented and expected.
  • I’m sure this is an issue with Leaflet, not with my app or other dependencies (Angular, Cordova, React, etc.).
  • I’ve searched through the current issues to make sure this hasn’t been reported yet.
  • I agree to follow the Code of Conduct that this project adheres to.

Steps to reproduce

  1. switch to NodeJS version 16. [My guess other versions have the same issue. I was unable to build 1.9.2 with older [v12 and/or v14] versions of NodeJS.
  2. execute npm install
  3. execute npm run build
  4. optionally execute npm publish after adding publishConfigto the registry and scoping the package name eg @private/leaflet

Expected behavior

I expect to get a package similar to the one published to the npm registry. However, it seems that the package transpiled differently. Specifically, for Leaflet 1.9.2 from npm, the result is:

_updateCircle: function (layer) {
    var p = layer._point,
        r = Math.max(Math.round(layer._radius), 1),
        r2 = Math.max(Math.round(layer._radiusY), 1) || r,
        arc = 'a' + r + ',' + r2 + ' 0 1,0 ';

    // drawing a circle with two half-arcs
    var d = layer._empty() ? 'M0 0' :
        'M' + (p.x - r) + ',' + p.y +
        arc + (r * 2) + ',0 ' +
        arc + (-r * 2) + ',0 ';

    this._setPath(layer, d);
},

My package has the same function transpiled to:

_updateCircle(layer) {
    const p = layer._point,
        r = Math.max(Math.round(layer._radius), 1),
        r2 = Math.max(Math.round(layer._radiusY), 1) || r,
        arc = `a${r},${r2} 0 1,0 `;

    // drawing a circle with two half-arcs
    const d = layer._empty() ? 'M0 0' :
        `M${p.x - r},${p.y
        }${arc}${r * 2},0 ${
            arc}${-r * 2},0 `;

    this._setPath(layer, d);
},

Current behavior

I don’t really care about the ECMAScript version. Modern browsers understand both. My issue is with the package initialization. The package that leaflet built for me locally, fails to initialize. For example, I cannot import plugins. The below is the code:

import * as L from 'leaflet';

import 'leaflet-editable-marker';
import '@geoman-io/leaflet-geoman-free';
import 'leaflet-toolbar';

import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
import 'leaflet-toolbar/dist/leaflet.toolbar.min.css';
import 'leaflet/dist/leaflet.css';

console.log('leaflet editable marker:', L.EditableMarker);

Is working just fine with regular 1.9.2 and it prints:

leaflet editable marker: ƒ () {
      setOptions(this); // call the constructor

      if (this.initialize) {
        this.initialize.apply(this, arguments);
      } // call all constructor hooks


      this.callInitHooks();

When I use the homebrew package, it does:

Attempted import error: 'EditableMarker' is not exported from 'leaflet' (imported as 'L')

and

leaflet editable marker: undefined

Minimal example reproducing the issue

No response

Environment

  • Leaflet version: 1.9.2
  • Browser (with version): Chrome 106.0.5249.119 (Official Build) (x86_64)
  • OS/Platform (with version): MacOS 10.14.6

Issue Analytics

  • State:closed
  • Created 10 months ago
  • Comments:10 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
mournercommented, Nov 11, 2022

If you want to have a working version I’d recommend you build from the v1 branch, as that is considered stable. Anything in main is subject to change (including breaking changes that are already in there).

@igorshmukler please tone down your language if you want us to help you, and read the responses more carefully. I quoted the relevant bit from @jonkoops above. Stable releases are published from the v1 branch, while main contains ongoing work on v2 with breaking changes, including a newer ES version.

0reactions
igorshmuklercommented, Nov 23, 2022

Just puzzles me that nobody would want to see whether the main branch builds, yet not my business really.

In order for me to get the thing to build a valid package, I just needed:

  git clone https://github.com/Leaflet/Leaflet.git
  cd Leaflet/
  git checkout tags/v1.9.2 -b v1.9.2-branch
  nvm use v16
  npm i
  npm run build
  cp dist/leaflet-src.js ../maps-designer/node_modules/leaflet/dist/
  cp dist/leaflet-src.js.map ../maps-designer/node_modules/leaflet/dist/

The main might be fixed now, or not. I was able to fork off 1.9.2 and take it from there.

Read more comments on GitHub >

github_iconTop Results From Across the Web

Angular Leaflet - Map does does not render properly
Here are the steps you need to follow: 1.install leaflet and import leaflet css style on angular.json "styles": [".
Read more >
Leaflet and tiler for R - can't get the correct tiles for displaying ...
I am setting up a webapplication and want to convert .grd files to tiles that can be read by Leaflet. This example can...
Read more >
Shiny App Not Working Properly on ShinyApps Server ...
I have created an interactive map using Shiny and Leaflet where countries are shaded based off of their press freedom score (darker, ...
Read more >
Leaflet crash course | All you need to know about ... - YouTube
This is the video about the leaflet js basic guidelines. source code: https://github.com/iamtekson/ Leaflet -Basic/tree/master/Basic#leafletjs ...
Read more >
Create Interactive Web Maps with the JavaScript 'Leaflet' Library
Package 'leaflet' ... JavaScript library and the 'htmlwidgets' package. ... the name of the group the newly created layers should belong to (for...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found