Map not displaying if Varnish cache is enabled

Created on 14 December 2024, about 2 months ago

Problem/Motivation

Hi,

I'm running Drupal 10.3.10 with the latest Geolocation 8.x.3.14 ( using the Leaflet Maps ) on an Ubuntu Server 24.04 with Varnish Cache varnish-7.1.1 from the Ubuntu repository. Unfortunately, maps won't display when visiting the site as an anonymous user throwing the following Javascript error:

on Firefox: TypeError: L.CRS is undefined
on Chrome: TypeError: Cannot read properties of undefined (reading 'EPSG3857')

Maps do display when logged in though.

I've tried adding certain rules to vcl_recv so the paths to the js files provided by Geolocation don't get cached but no luck so it would be nice to have a rule for Varnish ( either 4.0 or 4.1 vcl ) as part of the documentation indicating how the maps can be displayed correctly or look if this is an actual issue on the js apis.

Here you can find the site with the issue for more reference: https://antrecu.com/random-pics/flower-12

Any help is really appreciated, thanks!

Steps to reproduce

Install Varnish 7 from the Ubuntu repository and configure the default.vcl with the instructions provided by: https://www.varnish-software.com/developers/tutorials/configuring-varnis...

🐛 Bug report
Status

Active

Version

3.14

Component

Javascript General / Frontend

Created by

🇪🇨Ecuador andres.torres

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

Comments & Activities

  • Issue created by @andres.torres
  • 🇪🇨Ecuador andres.torres

    Quick update, i just enabled a new server without Varnish installed, just Apache (2.4.5) and PHP (8.2) and the Javascript issue is present with Geolocation 8.x.3.14 and 8.x.3-dev. so this has nothing to do with Varnish for anonymous users.

  • 🇪🇨Ecuador andres.torres

    I just installed a brand new Drupal 10.4 today as is was released and double tested Geolocation 8.x.3.4 on a standard LAMP installation (No Varnish) and using Olivero as default theme, the issue still persists with Leaflet for Anonymous users. Guess we might need to set the issue as critical since Leaflet is the only opensource solution for maps in Drupal through the Geolocation module.

  • 🇪🇨Ecuador andres.torres

    After doing a little research and testing it seems that this issue is related to the following:

    https://www.drupal.org/node/3473558 Asset ordering is now more strictly determined by library dependencies.
    on Drupal 10.3.10, Drupal 10.4 releases

    See also https://www.drupal.org/project/entity_browser/issues/3485010 Update CI configuration Active Update CI configuration and fix JS dependencies.

    I'm attaching these since Leaflet Maps were working on prior versions of Geolocation Field 8.x.3.x with Drupal 10.3.1 for example. So my guess is that the new JS libraries handler introduced in Drupal 10.4 is affecting how Geolocation Field is loading them.

  • 🇩🇪Germany jan kellermann

    Could not reproduce.

    • I installed a new D10.4 and required drupal/geolocation:^3.14.
    • I enabled geolocation_leaflet (drush automatically installed all further modules.)
    • I added a new geo field to content type basic page with display Geolocation Formatter - Map without any further options.
    • I created a new node with a geolocation.
    • I viewed this node as anonymous user with and without JS aggregation and also with multiple drush cr.

    Can you provide more information? Maybe a screenshot of network tab in your browsers DevTools?

  • 🇪🇨Ecuador andres.torres

    Hi Jan, thanks for your reply. I think we can disregard the issue for now, after running more tests, i was able to get the map working again on the site im working on by uninstalling 8.3.4 and upgrading to the 4.x branch my guess its that the mysql database got corrupted during core and modules upgrades from 10.3.1 to 10.3.10 and 10.4.

  • 🇫🇮Finland oakulm

    I'm also experiencing this issue. The solution is not good if the way is to move from 3.x to 4.x. I will try to see what's the problem

  • 🇺🇦Ukraine seonic

    Confirmed, the same issue. In my case this is a problem with a tour module.
    Minified js of the tour module defines the L function:

    function L(e) {
        e.parentNode && e.parentNode.removeChild(e)
    }
    

    Geolocation's leafletPromise resolves it as real leaflet map and processes it which cause the error.

    You can check which script overrides L function just console.log the L variable in the leafletPromise.

    Steps to reproduce:
    1. Install D10.4.1
    2. Install Tour module
    3. Login as user with 'access tour' permission and check map in admin interface or elsewhere.

    Is this a problem of the geolocation module when some js files may override global L variable?

Production build 0.71.5 2024