Problem/Motivation

In https://www.drupal.org/project/collapsiblock/issues/3418361, 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)

Screenshot showing an example of a JavaScript console error in the Leaflet JavaScript library pertaining to L.

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)
    Screenshot of the Leaflet More Maps demo page showing the working Esri World Imagery 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.
    Screenshot of the Leaflet More Maps demo page with a broken Esi World Imagery map

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

CommentFileSizeAuthor
Screenshot 2024-06-14 at 6.57.49 PM.png511.54 KBcainaru
Screenshot 2024-06-18 at 1.43.09 PM.png500.07 KBcainaru
Screenshot 2024-06-18 at 1.42.34 PM.png7.86 MBcainaru

Issue fork collapsiblock-3455500

Command icon Show commands

Start within a Git clone of the project using the version control instructions.

Or, if you do not have SSH keys set up on git.drupalcode.org:

About issue forks

Comments

cainaru created an issue. See original summary.

cainaru’s picture

cainaru
she/her
Primary language English
Location Norwood, NY, USA
commented
Issue summary: View changes

darvanen made their first commit to this issue’s fork.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

Thanks for the detailed report @cainaru, I'm working on finding a fix for this now. It was caused by the move to vite from gulp and my less-than-perfect understanding of vite config.

darvanen credited larowlan.

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented

@larowlan came up with the solution for this in Slack:

you want this
theme/dist/collapsiblock.js: { minified: true, attributes: {type: module} }
which causes it to render as <script type="module">

darvanen opened merge request !32

  • darvanen committed 42505422 on 4.2.x 
    Issue #3455500 by darvanen, cainaru, larowlan: Globally-defined L in new...

darvanen opened merge request !33

darvanen opened merge request !34

darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Status: Active » Patch (to be ported)

Having trouble with the pipeline for 4.x.

I can cut a release for 4.2.1 in the interim though.

darvanen closed merge request !33

  • darvanen committed 124c1919 on 4.x 
    Issue #3455500 by darvanen, cainaru, larowlan: Globally-defined L in new...
darvanen’s picture

darvanen
he/him
Primary language English
Location Sydney, Australia
commented
Version: 4.2.0 » 4.x-dev
Status: Patch (to be ported) » Fixed

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.

ressa’s picture

ressa
he/him
commented

Thanks @cainaru and @darvanen. I got two warnings, after updating contrib modules and Drupal core:

  • Warning: file_get_contents(modules/contrib/collapsiblock/theme/dist/js/collapsiblock.min.js): Failed to open stream: No such file or directory [...]
  • Warning: file_get_contents(modules/contrib/collapsiblock/theme/dist/css/collapsiblock.min.css): Failed to open stream: No such file or directory [...]

Everything did work as expected after going through the update, clearing cache, etc., but to understand why the warnings got there in the first place, I searched and found this issue. As I wrote, everything works as expected on https://arst.dk/kort?data=radon where both Collapsiblock and Leaflet are used, so thanks for the report and update quickly thereafter.