Cannot read properties of undefined (reading 'CRS') even though I defined the CRS

[johnsalzbrunn]

I am trying to use the code found in this example https://jsbin.com/yovezox/edit?html,output in my own leaflet application and it keeps throwing me this error: "Cannot read properties of undefined (reading 'CRS')". I can't quite understand it because it seems to me that I have defined the CRS. Below is the code I am referencing.

<!-- ESRI Leaflet -->
<script src="https://unpkg.com/esri-leaflet@2.1.2/dist/esri-leaflet.js"
    integrity="sha512-ouokQ1RIIoqPTZKwlapdxHO5VWFoAi8wE+SwhSX89Ifac0w3p+H2da4oqHvRsBTIpNLewzAZU7gRVDFXyXcfjA=="
    crossorigin=""></script>

<!-- Proj4 and Proj4Leaflet -->
<script src="https://unpkg.com/proj4@2.4.3"></script>
<script src="https://unpkg.com/proj4leaflet@1.0.1"></script>

<script>
  var crs = new L.Proj.CRS("EPSG:3857","+proj=merc +a=6378137 +b=6378137 +lat_ts=0.0 +lon_0=0.0 +x_0=0.0 +y_0=0 +k=1.0 +units=m +nadgrids=@null +wktext  +no_defs", {
    origin: [-20037700, 30241100],
    resolutions: [
      152.874174498349,
      110.250508001016,
      76.43695495724326,
      57.32791465582932,
      38.218609770552874,
      27.341038015409367,
      19.109304885276437,
      14.33197866395733,
      9.554652442638218,
      7.165989331978665,
      4.777326221319109,
      3.5829946659893324,
      2.3886631106595546,
      1.7914973329946662,
      1.1943315553297773,
      0.8956163745660826,
      0.5971657776648887,
      0.4479404792142918,
      0.2984505969011938,
      0.22383794767589538,
      0.1492252984505969,
      0.07461264922529845
      // ...
    ]
  });

var map = L.map('map', {
    zoomControl: false,
    closePopupOnClick: false,
    maxZoom: 28,
    minZoom: 1,
    layers: [layer_OpenStreetMap_0],//openstreetmap
    rotate: true,
    worldCopyJump: false,
    tap: false,
    maxBounds: [[-90, -180], [90, 180]],
    //zoomDelta: 0.25,
    zoomSnap: 0.25,
    crs: crs
}).setView([37.09024, -95.712891], 3);

  L.esri.tiledMapLayer({
    url: 'https://web2.co.ottertail.mn.us/arcgis/rest/services/Photography/2021_Photo/MapServer',
    useCors: false,
    maxZoom: 21,
    minZoom: 0
  }).addTo(map);
</script>

[bvitlas]

same here. did you find the fix?

[sylvaindecout]

i had the same error in an angular app, and adding this fixed it: import "proj4leaflet";