ReferenceError: $ is not defined at NewClass.wfs (L.Geoserver.js:46:1)

[OculiViridi]

Hi!

I'm using your plugin to load both WMS and WFS layers from a GeoServer instance on a leaflet map inside an Angular app.
WMS are working fine, but when I switched to WFS, I got this error:

JSONP for GeoServer is enabled.
If I try to preview the WFS "Levels" layer from GeoServer web UI, I got the following JSONP data back:

{
    "type": "FeatureCollection",
    "features": [
        {
            "type": "Feature",
            "id": "V_Levels.fid-6ecc0c01_1813d891570_169",
            "geometry": {
                "type": "MultiPolygon",
                "coordinates": [
                    [
                        [
                            [
                                7.7826615200000008,
                                45.3871735
                            ],
                            [
                                7.79106001,
                                45.38629957
                            ],
                            ...other coordinates...
                        ]
                    ]
                ]
            },
            "geometry_name": "Geom",
            "properties": {
                "Id": 1,
                "CodRip": 1,
                "CodRegione": 1,
                "CodProvincia": 1,
                "CodComune": 201,
                "CodUts": 201,
                "CodProvinciaComune": 1001,
                "CodIstatComune": "001001",
                "Comune": "Agliè",
                "ComuneAltro": null,
                "Area": 13314604.171518622,
                "Perimetro": 16102.469408787643,
                "ConcentrazioneMedia": 71
            }
        },
        ...other features...
    ],
    "totalFeatures": 7904,
    "numberMatched": 7904,
    "numberReturned": 50,
    "timeStamp": "2022-06-07T10:04:08.658Z",
    "crs": {
        "type": "name",
        "properties": {
            "name": "urn:ogc:def:crs:EPSG::4326"
        }
    }
}

Layers' configuration

// WORKS!
let boundaries = L.Geoserver.wms('https://mygeoserver.dev/geoserver/wms', {
    layers: 'boundaries:all',
    attribution: '<a href="https://mygeoserver.dev">My data</a>'
});
boundaries.addTo(this.map);

// WORKS!
let wmsLevels = L.Geoserver.wms('https://mygeoserver.dev/geoserver/wms', {
     layers: 'rad:Levels',
     attribution: '<a href="https://mygeoserver.dev">My levels</a>'
});
wmsLevels.addTo(this.map);

// DOESN'T WORK!
let wfsLevels = L.Geoserver.wfs("https://mygeoserver.dev/geoserver/wfs", {
    layers: "rad:Levels",
    attribution: '<a href="https://mygeoserver.dev">My levels</a>'
});
wfsLevels.addTo(this.map);

Since the issue seems to be related to $ jQuery function not being found, I've also tried to add a reference to jquery in my module, but with no success. The jquery npm package is already installed in my application.

import * as $_ from 'jquery';
const $ = $_;

[iamtekson]

I don't know how angular works, but can you try importing jquery like this,

import * as $ from 'jquery/dist/jquery.min.js';

It is not the library error. I think it is due to some errors on angular and jquery setup.

Since it is not related to the library, I am closing this issue. Feel free to open it if you think something wrong with lib.

[OculiViridi]

@iamtekson Yes, I've tried, but insert that line on top of my component.ts file didn't work.
Instead, it worked once I added that line inside the L.Geoserver.js file of the package... which obviously is not a solution but only a workaround!

Also, that import line is already present in the app.component.ts main file, because jQuery is also used by other components on the app.

Any other suggestion?

[iamtekson]

Instead, it worked once I added that line inside the L.Geoserver.js file of the package... which obviously is not a solution but only a workaround!

Yes, you are right. But I think this is the best way for now. I will update the package and release the new version later.