Leaflet Vectorgrid problem with click event

Question

I'm using Vue3 + Vite and trying to make leaflet.vectorgrid work with my map. I'm almost there, I can display my topojson file correctly using this code:

fetch('./mytopo.json').then(function(response){
        return response.json();
      }).then(function(json){
        var vectorGrid = L.vectorGrid.slicer( json, {
          rendererFactory: L.canvas.tile,
          interactive: true,
          minZoom: 10,
          maxZoom: 12,
          vectorTileLayerStyles: {
            'reduced2': function(properties, zoom) {
              //console.log(properties);
              var gradient = hslToHex(percent,100,50);
              return {
                fillColor: gradient,
                fillOpacity: 0.5,
                stroke: true,
                fill: true,
                color: 'black',
                weight: 1,
              }
            }
          }
        }).addTo(map);

but when I add the following code for catching clicks, I get an error:

**Uncaught TypeError: L.DomEvent.fakeStop is not a function
    at NewClass._onClick (Leaflet.VectorGrid.bundled.min.js:2:15768)
    at HTMLCanvasElement.handler (DomEvent.js:108:13)
Leaflet.VectorGrid.bundled.min.js:2**

the event code:

vectorGrid.on('click', function(e) {
          L.popup()
          .setContent('Hello world!
This is a nice popup.')
          .setLatLng(e.latlng)
          .openOn(map)
        });

Any idea of what is happening? I suspect there is a configuration / version problem ... Here are my components for my app:

@geoman-io/leaflet-geoman-free@2.13.0
├── @popperjs/core@2.11.6
├── @vitejs/plugin-vue@3.0.3
├── @vue-leaflet/vue-leaflet@0.6.1
├── axios@0.27.2
├── bootstrap@5.2.0
├── https@1.0.0
├── leaflet-fullscreen@1.0.2
├── leaflet-sidebar@0.2.4
├── leaflet.markercluster@1.5.3
├── leaflet.vectorgrid@1.3.0
├── leaflet@1.9.1
├── sass-loader@13.0.2
├── sass@1.54.9
├── topojson-client@3.1.0
├── vite-plugin-mkcert@1.9.0
├── vite-plugin-rewrite-all@1.0.0
├── vite@3.0.9
├── vue-google-charts@1.1.0
├── vue-gtag@2.0.1
├── vue-router@4.1.5
└── vue@3.2.38

EDIT: I made some tests and it is working fine with Leaflet 1.7.1 but not with 1.8+. It seems the fakestop function doesn't exist anymore with Leaflet1.8+. Any idea how to solve the problem?

Thanks a lot Alex

Leaflet Vectorgrid problem with click event

0 Answers