>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3455500. --> Reported by: [cainaru](https://www.drupal.org/user/3071219) Related to !34 !33 !32 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>In <a href="https://www.drupal.org/project/collapsiblock/issues/3418361">https://www.drupal.org/project/collapsiblock/issues/3418361</a>, it looks like there was an un-minified version of the Collapsiblock JavaScript introduced in <a href="https://git.drupalcode.org/project/collapsiblock/-/commit/9257fec05fc1e2a1ce019f324e3f73d675909834#928bcd3c9c26832567e6f093929fdc471b05a939_0_8">https://git.drupalcode.org/project/collapsiblock/-/commit/9257fec05fc1e2a1ce019f324e3f73d675909834#928bcd3c9c26832567e6f093929fdc471b05a939_0_8</a>. However, it seems that this new JS is setting a global variable for <code>L</code>, which is interfering with the JavaScript from the <a href="https://www.drupal.org/project/leaflet">Leaflet</a> 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).</p> <p>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&rsquo;s Console in the browser inspection tools shows some of the following console errors: </p> <pre>leaflet.drupal.js?v=10.2.7:985 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')<br>&nbsp;&nbsp;&nbsp; at leaflet.drupal.js?v=10.2.7:985:38<br>&nbsp;&nbsp;&nbsp; at leaflet.drupal.js?v=10.2.7:1017:3<br><br>leaflet_more_maps.js?sfacao:25 Uncaught TypeError: Cannot read properties of undefined (reading 'extend')<br>&nbsp;&nbsp;&nbsp; at leaflet_more_maps.js?sfacao:25:31<br><br>drupal.js?v=10.2.7:64 Uncaught TypeError: Cannot read properties of undefined (reading 'get')<br>&nbsp;&nbsp;&nbsp; at loadMap (leaflet.drupal.js?v=10.2.7:23:74)<br>&nbsp;&nbsp;&nbsp; at HTMLDivElement.&lt;anonymous&gt; (leaflet.drupal.js?v=10.2.7:168:13)<br>&nbsp;&nbsp;&nbsp; at Function.each (jquery.min.js?v=3.7.1:2:3129)<br>&nbsp;&nbsp;&nbsp; at ce.fn.init.each (jquery.min.js?v=3.7.1:2:1594)<br>&nbsp;&nbsp;&nbsp; at Object.&lt;anonymous&gt; (leaflet.drupal.js?v=10.2.7:14:26)<br>&nbsp;&nbsp;&nbsp; at Function.each (jquery.min.js?v=3.7.1:2:3179)<br>&nbsp;&nbsp;&nbsp; at Object.attach (leaflet.drupal.js?v=10.2.7:8:9)<br>&nbsp;&nbsp;&nbsp; at drupal.js?v=10.2.7:166:24<br>&nbsp;&nbsp;&nbsp; at Array.forEach (&lt;anonymous&gt;)<br>&nbsp;&nbsp;&nbsp; at Drupal.attachBehaviors (drupal.js?v=10.2.7:162:34)</pre><p> <img src="https://www.drupal.org/files/issues/2024-06-18/Screenshot%202024-06-14%20at%206.57.49%E2%80%AFPM.png" alt="Screenshot showing an example of a JavaScript console error in the Leaflet JavaScript library pertaining to L."></p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <ol> <li><code>composer require 'drupal/leaflet:^10.2'</code> and then enable the module</li> <li><code>composer require 'drupal/leaflet_more_maps:^2.2'</code> and then enable the module</li> <li>Verify that you are using Collapsiblock version 4.1.0</li> <li>Visit <code>/admin/config/development/performance</code> and disable <code>Aggregate JavaScript files</code> for the purposes of being able to easier see which files experience the error</li> <li>Clear Drupal cache</li> <li>Visit <code>/admin/config/system/leaflet-more-maps/demo</code></li> <li>Verify you see the free maps on the page (e.g., the &ldquo;Esri World Imagery (zoom 0..17)&rdquo; map)<br><img src="https://www.drupal.org/files/issues/2024-06-18/Screenshot%202024-06-18%20at%201.42.34%E2%80%AFPM.png" alt="Screenshot of the Leaflet More Maps demo page showing the working Esri World Imagery map"></li> <li><code>composer update drupal/collapsiblock</code> and verify you are now using version 4.2.0 of Collapsiblock</li> <li>Clear Drupal cache</li> <li>Visit <code>/admin/config/system/leaflet-more-maps/demo</code> again</li> <li><strong>Expected result:</strong> I should see the free maps on the <code>/admin/config/system/leaflet-more-maps/demo</code> page (e.g., the &ldquo;Esri World Imagery (zoom 0..17)&rdquo; map)</li> <li><strong>Actual result:</strong> no maps appear on the <code>/admin/config/system/leaflet-more-maps/demo</code> page.<br><img src="https://www.drupal.org/files/issues/2024-06-18/Screenshot%202024-06-18%20at%201.43.09%E2%80%AFPM.png" alt="Screenshot of the Leaflet More Maps demo page with a broken Esi World Imagery map"></li> </ol> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <ul> <li>Compare the contents of the un-minified collapsiblock.js file for 4.2.0 <a href="https://git.drupalcode.org/project/collapsiblock/-/blob/4.2.0/theme/dist/collapsiblock.js?ref_type=tags">https://git.drupalcode.org/project/collapsiblock/-/blob/4.2.0/theme/dist/collapsiblock.js?ref_type=tags</a> with its minified predecessor from 4.1.0 <a href="https://git.drupalcode.org/project/collapsiblock/-/blob/4.1.0/theme/dist/js/collapsiblock.min.js">https://git.drupalcode.org/project/collapsiblock/-/blob/4.1.0/theme/dist/js/collapsiblock.min.js</a> to determine what differences could be causing this?</li> <li>Consider narrowing the scope of Collapsiblock's <code>L</code> so it does not get set globally?</li> </ul> <h3 id="summary-remaining-tasks">Remaining tasks</h3> <h3 id="summary-ui-changes">User interface changes</h3> <h3 id="summary-api-changes">API changes</h3> <h3 id="summary-data-model-changes">Data model changes</h3>