import * as L from 'leaflet' gets "Can't resolve 'leaflet'" with 1.8.0-beta0

Steps to reproduce

I have an ‘evergreen’ Angular app (https://github.com/EOCOnline/rangertrak) It compiled fine (& runs with known issues), in VSCode, using “ng s -o” with (with leaflet 1.7.1) Then I run npm install leaflet@1.8.0-beta.0 and now running ng s -o gets:

./src/app/entry/mini-lmap.component.ts:3:0-29 - Error: Module not found: Error: Can't resolve 'leaflet' in 'D:\Projects\RangerTrak\rangertrak\src\app\entry'

(which is yelling me about import * as L from 'leaflet')

./src/app/lmap/lmap.component.ts:2:0-31 - Error: Module not found: Error: Can't resolve 'leaflet' in 'D:\Projects\RangerTrak\rangertrak\src\app\lmap'

./node_modules/leaflet/dist/leaflet-src.js - Error: Module build failed (from ./node_modules/source-map-loader/dist/cjs.js):
Error: ENOENT: no such file or directory, open 'D:\Projects\RangerTrak\rangertrak\node_modules\leaflet\dist\leaflet-src.js'

Restarting VSCode, I get it to compile without any obvious errors, but on running I get:

I’m no expert on this and this could well be user error or due to other packages installed (FEEL FREE TO CLOSE THIS ISSUE if so!), but I thought you might want the feedback. I do not need any of the new features, so am happy retreating to 1.7.1 for now.

I’m super impressed at your great work, and dismayed at the war. Our hearts are with you.

Expected behavior

Current behavior

Environment

• Leaflet version:
• Browser (with version):
• OS/Platform (with version):

PS:

D:\Projects\RangerTrak\rangertrak> npm list
rangertrak@0.11.38 D:\Projects\RangerTrak\rangertrak
├── __ngcc_entry_points__.json@ extraneous
├── @angular-devkit/build-angular@13.2.6
├── @angular-material-components/color-picker@7.0.1
├── @angular-material-components/datetime-picker@7.0.1
├── @angular/animations@13.2.6
├── @angular/cdk@13.2.6
├── @angular/cli@13.2.6
├── @angular/common@13.2.6
├── @angular/compiler-cli@13.2.6
├── @angular/compiler@13.2.6
├── @angular/core@13.2.6
├── @angular/fire@7.2.1
├── @angular/flex-layout@13.0.0-beta.38
├── @angular/forms@13.2.6
├── @angular/google-maps@13.2.6
├── @angular/material@13.2.6
├── @angular/platform-browser-dynamic@13.2.6
├── @angular/platform-browser@13.2.6
├── @angular/router@13.2.6
├── @angular/service-worker@13.2.6
├── @fortawesome/fontawesome-svg-core@1.3.0
├── @fortawesome/free-brands-svg-icons@6.0.0
├── @fortawesome/free-regular-svg-icons@6.0.0
├── @fortawesome/free-solid-svg-icons@6.0.0
├── @googlemaps/markerclusterer@1.0.26
├── @material/banner@13.0.0
├── @material/slider@13.0.0
├── @material/switch@13.0.0
├── @mdi/js@6.5.95
├── @ngx-pwa/local-storage@13.0.2
├── @popperjs/core@2.11.2
├── @types/google-maps@3.2.3
├── @types/google.maps@3.48.2
├── @types/jasmine@3.10.3
├── @types/leaflet.markercluster@1.4.6
├── @types/leaflet@1.7.9
├── @types/node@17.0.21
├── @types/supercluster@7.1.0
├── @what3words/api@4.0.5
├── ag-grid-angular@27.0.0
├── ag-grid-community@27.0.1
├── chalk@4.1.2
├── cross-conf-env@1.2.1
├── dayjs@1.10.8
├── dev-norms@1.7.1
├── firebase@9.6.8
├── http-server@14.1.0
├── idb@7.0.0
├── import-sort-cli@6.0.0
├── import-sort-parser-typescript@6.0.0
├── import-sort-style-module@6.0.0
├── import-sort@6.0.0
├── init-dev-env@1.0.0
├── jasmine-core@4.0.1
├── js-beautify@1.14.0
├── jshint@2.13.4
├── karma-chrome-launcher@3.1.1
├── karma-coverage@2.2.0
├── karma-jasmine-html-reporter@1.7.0
├── karma-jasmine@4.0.1
├── karma@6.3.17
├── leaflet.markercluster@1.5.3
├── leaflet.offline@2.1.0
├── leaflet@1.8.0-beta.0
├── npm-run-all@4.1.5
├── prettier@2.5.1
├── rimraf@3.0.2
├── rxfire@6.0.3
├── rxjs@7.5.5
├── tslib@2.3.1
├── tslint-config-prettier@1.18.0
├── tslint-etc@1.13.10
├── tslint-plugin-prettier@2.3.0
├── tslint@6.1.3
├── tsviz-cli@2.0.3
├── typescript@4.5.5
├── xlsx-style@0.8.13
├── xlsx@0.18.3
└── zone.js@0.11.5

on a desktop with Windows 10 & latest Chrome browser

[BButner]

I’m doing Angular & Typescript, & have incorporated leaflet.MarkerCluster & leaflet.offline.

I think I’ve uninstalled & removed them from package.json, angular.json, uninstalled the @type files, then added the ref to the main script from the Amazon CDN, and still get "Cannot find module 'leaflet' or its corresponding type declarations.ts(2307)" when I try to do either: import * as L from 'leaflet' or import { tileLayer, latLng, control, marker, icon, divIcon, LatLngBounds, Map, MapOptions } from 'leaflet'

I easily could have missed something as there are a bunch of potential pitfalls, so will await the next beta & re-verify this still exists then. (As I noted I’m not reliant on any new functionality, just trying to help test - so certainly don’t want to waste your time either!)

Its much easier to just clone the project, run npm install, then do npm run build, then run npm link from the root of the project directory, then go into your project and to npm link leaflet.

I did this, and was able to resolve the issue originally in this issue, and resolve the issue I was originally experiencing that was making me want to update.

So to confirm with @Falke-Design and @jonkoops, this did indeed resolve the issue with “Can’t resolve ‘leaflet’” for me.

[Falke-Design]

@BButner @VashJuan You can access the main build over https://leafletjs-cdn.s3.amazonaws.com/content/leaflet/main/leaflet-src.js You can download it and use it directly instead of useing the the npm package