I am trying to use plain TypeScript to write a very simple script that creates a Leaflet map on my website and fills it with data. I am not using any frameworks, so the Leaflet map is loaded with a <script> tag in the website page's head. The L object is then available in every other script on the page.

The script I am writing in TypeScript references this L object, but it keeps showing me an error 'L' refers to a UMD global, but the current file is a module. Consider adding an import instead. for every usage of L in the script. The script compiles with ESBuild to JavaScript fine however, and it works on my website perfectly fine too.

Example snippet of code I am using:

const map = L.map('map').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

What does this error mean exactly?