leaflet export broken in 1.8.0-beta.0

Steps to reproduce Steps to reproduce the behavior:

• import leaflet in a js file
• use a bundler like webpack or rollup to bundle the code
• load the bundle in any html file that does not have a div with id leaflet

Expected behavior No error

Current behavior Javascript Error: Uncaught ReferenceError: leaflet is not defined

Environment

• Leaflet version: 1.8.0-beta.0
• Browser (with version): Chrome 99.0.4844.51, Firefox 97.0.2
• OS/Platform (with version): Mac OS 12.2.1 (21D62)

Additional context The problem seems to be that at the end of leaflet-src.js leaflet is used instead of exports now.

  var oldL = window.L;
  leaflet.noConflict = function() {
  	window.L = oldL;
  	return this;
  }
  // Always export us to window global (see #2364)
  window.L = leaflet;

A fun little detail is that if you have a div with the id leaflet in the html it is added to the global scope and everything works as intended. But I’m not sure yet why that fixes it.

Minimal example reproducing the issue https://github.com/Intermaps/leaflet-1.8.0-beta.0-export-bug

You can build with either webpack or rollup (I first thought the issue was related to my build process) and then open index.html

[Eschon]

Oh, you’re right, I missed that. That also explains why I couldn’t get the error in the plunkr.
Then it seems to only be a problem if leaflet is used with a bundling process like in the repository that I posted

I’ve updated the description of the bug accordingly

[simon04]

As workaround, import leaflet-src.esm.js (the ES-Module does not contain the noConflict code):

import * as L from "leaflet/dist/leaflet-src.esm.js"

You might need the following in a index.d.ts for TypeScript support:

declare module "leaflet/dist/leaflet-src.esm.js" {
  export * from "leaflet";
}