Use different versions of leaflet library

Question

I am developing a web application using React and different other libraries.

I am using Windy API (weather forecast) which uses leaflet library 1.4.0.

I would also like to use leaflet in the same application but this time using the latest version 1.7.1.

I import leaflet 1.4.0 with the CDN as described in the Windy API documentation.

I import the latest version with npm.

The problem is leaflet is creating a global variable L, so when I import the latest version of leaflet, the API windy is not working.

I tried to import leaflet with allias but it doesn't change the problem of the global variable.

Is possible to change the name of the global variable? Any suggestions to solve this problem?

Thank you !

Answer 1

You can use L.noConflict() which applies the old object to L and returns the Leaflet instance:

console.log(L.version) // 1.4.0
import 'leaflet';
console.log(L.version) // 1.7.1

var leaflet1_7 = L.noConflict();

console.log(L.version) // 1.4.0
console.log(leaflet1_7 ) // 1.7.1

But it can be that noConflict is not working properly, there where some bugs with it. But they are fixed in 1.8.0-beta.3 and in the coming release in the next days.