Problem/Motivation

Thanks for including the Maplibre libraries from Leaflet 10.2.6, and Vector tiles support. It's nice to have everything ready to use after installing Leaflet module, without having to do anything else.

After Leaflet 10.2.6 where maplibre-gl-js & maplibre-gl-leaflet libraries js and css files was embedded in the Leaflet module itself, if you use the Maplibre libraries for example for Vector tiles, and you aggregate JavaScript files, you get a white page, and this message in the console:

Uncaught SyntaxError: redeclaration of const a
note: Previously declared at line 585, column 124988 
js_36Cc25ySfc_bCPZPMGkgRO6_2OjFQNpZD9P35kGaiS8.js:585:125091
js_36Cc25ySfc_bCPZPMGkgRO6_2OjFQNpZD9P35kGaiS8.js:585:124988

Steps to reproduce

  1. Add multiple layers as describe on https://www.drupal.org/docs/extending-drupal/contributed-modules/contrib...
  2. Add a layer using the new Maplibre libraries (Leaflet 10.2.6) for example Vector tiles: 
            'Stamen TonerLite Vector' => [
          'type' => 'vector',          
          'urlTemplate' => '//tiles.stadiamaps.com/styles/stamen_toner_lite.json',
          'options' => [
            "subdomains" => "abcd",
            "minZoom" => 0,
            "maxZoom" => 20,
            "ext" => "png",
            "attribution" => "&copy; <a href='https://www.stadiamaps.com/' target='_blank'>Stadia Maps</a> &copy; <a href='https://www.stamen.com/' target='_blank'>Stamen Design</a> &copy; <a href='https://openmaptiles.org/' target='_blank'>OpenMapTiles</a> &copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors",
          ],
        ],
  3. Toggle JavaScript aggregation with this in settings.php (FALSE/TRUE):
    $config['system.performance']['js']['preprocess'] = FALSE;
  4. See that the map doesn't render with aggregation enabled

Proposed resolution

Remaining tasks

User interface changes

API changes

Data model changes

Comments

ressa created an issue. See original summary.

ressa’s picture

ressa
he/him
commented
Issue summary: View changes
ressa’s picture

ressa
he/him
commented
Issue summary: View changes
ressa’s picture

ressa
he/him
commented
Issue summary: View changes
ressa’s picture

ressa
he/him
commented
Title: Map breaks with JavaScript aggregation after Maplibre libraries inclusion » Multilayer map breaks with JavaScript aggregation after Maplibre libraries inclusion
Issue summary: View changes
ressa’s picture

ressa
he/him
commented
Title: Multilayer map breaks with JavaScript aggregation after Maplibre libraries inclusion » Multilayer map breaks with JavaScript aggregation when using Maplibre libraries
Issue summary: View changes
itamair’s picture

itamair commented

Thanks @ressa for reporting this …
Some questions to better understand how to fix or workaround this:

- was aggregation working for you with previous versions (with these libraries not embedded in the module)?;
- does everything work without aggregation with this latest release?
- do you have any clue how to fix or workaround all this? In other words … do you see any clear issue or mistake in latest release commit (that only focuses on this …);

ressa’s picture

ressa
he/him
commented

Thanks for a fast reply @itamair. Everything worked well, also with aggregation enabled, and it was right after updating to the new version 10.2.6 I got the problem. I removed the vector-based tile from my map, and now it works well.

It seems like the combination of several javascript files can create an overlap: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Errors...

If you search for the "redeclaration of const" error together with "aggregation" or "minify" there are similar issues.

Perhaps this is a Drupal core issue, for the aggregator component?

  • itamair committed 3bd02997 on 10.2.x 
    Issue #3410672: Multilayer map breaks with JavaScript aggregation when...
itamair’s picture

itamair commented
Status: Active » Fixed

Hi @ressa ... latest commit and new 10.2.7 release should have fixed this issue,
simply excluding the maplibre-gl.js from aggregation.

It looks somehow in its aggregation Drupal would assigning into it an already assigned variable, and that conflicts ...

Worth to mention that that both maplibre-gl-js and maplibre-gl-leaflet would only be requested / included in the page load if a "vector" type overlay is defined among the required ones: https://git.drupalcode.org/project/leaflet/-/blob/10.2.x/src/LeafletServ...

Please, reopen this if you still experience the same issue, upon this fix ...

ressa’s picture

ressa
he/him
commented
Issue summary: View changes

Perfect @itamair, the latest release which excludes maplibre-gl.js from aggregation fixes the issue.

It's probably a Drupal core issue, since the aggregation combines several javascript files, which causes the problem, so I created #3411010: Document that aggregation of JavaScript files can cause redeclaration.

ressa’s picture

ressa
he/him
commented
Issue summary: View changes
ressa’s picture

ressa
he/him
commented

To make it easier to replicate for other users, would it be worth adding a tip on how to always load the Maplibre library to the Drupal core Aggregator issue, so that a custom module is not necessary?

Because then Step "#2 Add a layer using the new Maplibre libraries ..." can be replaced with this:

To always load the Maplibre GL library, change this line:
$attached_libraries = ['leaflet/general', 'leaflet/leaflet-drupal'];

To this:
$attached_libraries = ['leaflet/general', 'leaflet/leaflet-drupal', 'leaflet/maplibre-gl-leaflet'];

https://git.drupalcode.org/project/leaflet/-/blob/10.2.x/src/LeafletServ...

ressa’s picture

ressa
he/him
commented

I have now updated the Aggregation issue.

ressa’s picture

ressa
he/him
commented

Since a conclusion was found in #3411010: Document that aggregation of JavaScript files can cause redeclaration, I have created a new Aggregate CSS and JS files in Drupal core page under "Performance", adding a workaround to the JS aggregation problem.

Status: Fixed » Closed (fixed)

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