Contrib.social

Globally-defined L in new collapsiblock.js file conflicts with Leaflet JS

Open on Drupal.org →
Created on 18 June 2024, 6 months ago
Updated 14 July 2024, 5 months ago

Problem/Motivation

In https://www.drupal.org/project/collapsiblock/issues/3418361 📌 Add and configure ESLint to GitLab test runner. Needs work , it looks like there was an un-minified version of the Collapsiblock JavaScript introduced in https://git.drupalcode.org/project/collapsiblock/-/commit/9257fec05fc1e2.... However, it seems that this new JS is setting a global variable for L, which is interfering with the JavaScript from the Leaflet → contrib module. This issue is present in the 4.2.0 version of Collapsiblock, but is not present in the previous versions (e.g., 4.1.0).

For sites using both Collapsiblock and Leaflet contrib modules, when updating Collapsiblock to version 4.2.0, all Leaflet maps fail to display in views, on nodes, or anywhere else one might have Leaflet. Google Chrome’s Console in the browser inspection tools shows some of the following console errors: 

leaflet.drupal.js?v=10.2.7:985 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at leaflet.drupal.js?v=10.2.7:985:38
    at leaflet.drupal.js?v=10.2.7:1017:3

leaflet_more_maps.js?sfacao:25 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')
    at leaflet_more_maps.js?sfacao:25:31

drupal.js?v=10.2.7:64 Uncaught TypeError: Cannot read properties of undefined (reading 'get')
    at loadMap (leaflet.drupal.js?v=10.2.7:23:74)
    at HTMLDivElement.<anonymous> (leaflet.drupal.js?v=10.2.7:168:13)
    at Function.each (jquery.min.js?v=3.7.1:2:3129)
    at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)
    at Object.<anonymous> (leaflet.drupal.js?v=10.2.7:14:26)
    at Function.each (jquery.min.js?v=3.7.1:2:3179)
    at Object.attach (leaflet.drupal.js?v=10.2.7:8:9)
    at drupal.js?v=10.2.7:166:24
    at Array.forEach (<anonymous>)
    at Drupal.attachBehaviors (drupal.js?v=10.2.7:162:34)

Steps to reproduce

  1. composer require 'drupal/leaflet:^10.2' and then enable the module
  2. composer require 'drupal/leaflet_more_maps:^2.2' and then enable the module
  3. Verify that you are using Collapsiblock version 4.1.0
  4. Visit /admin/config/development/performance and disable Aggregate JavaScript files for the purposes of being able to easier see which files experience the error
  5. Clear Drupal cache
  6. Visit /admin/config/system/leaflet-more-maps/demo
  7. Verify you see the free maps on the page (e.g., the “Esri World Imagery (zoom 0..17)” map)
  8. composer update drupal/collapsiblock and verify you are now using version 4.2.0 of Collapsiblock
  9. Clear Drupal cache
  10. Visit /admin/config/system/leaflet-more-maps/demo again
  11. Expected result: I should see the free maps on the /admin/config/system/leaflet-more-maps/demo page (e.g., the “Esri World Imagery (zoom 0..17)” map)
  12. Actual result: no maps appear on the /admin/config/system/leaflet-more-maps/demo page.

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

🐛 Bug report
Status

Fixed

Version

4.0

Component

Code

Created by

🇺🇸United States cainaru Norwood, NY, USA

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024