Version 4.x does not install or work with projects using React 17.x or Preact 10.x

[smcardle]

Bug report in v4

Before opening an issue, make sure to read the contributing guide and understand this is a bug tracker, not a support platform.

Please make sure to check the following boxes before submitting an issue.
Issues opened without using this template will be closed unless they have a good reason not to follow this template.

• [ x] All peer dependencies are installed: React, ReactDOM and Leaflet.
• [ ] Using the latest version of React and ReactDOM v18.
• [ x] Using the supported version of Leaflet (v1.8.0 minimum) and its corresponding CSS file is loaded.
• [ x] Using the latest v4 version of React-Leaflet.
• [ x] The issue has not already been reported.
• [ x] Make sure you have followed the quick start guide for Leaflet.
• [ x] Make sure you have fully read the documentation and that you understand the limitations.

Expected behavior

I expect this library to work with React 17.x

Actual behavior

Does not work with React 17.x

Steps to reproduce

Add this library to an existing project using React 17.x and NPM reports unresolved dependancy and refuses to install without using the NPM --legacy-peer-deps flag.

Once it does install with React 17.x it fails to run in the Browser using Preact reporting the following error when trying to render the <MapContainer>

Uncaught DOMException: Failed to execute 'createElement' on 'Document': The tag name provided ('[object Object]') is not a valid name.
    at HTMLDocument.createElement (<anonymous>:1:1536)

I see in the Commit for 4.x that the React version was updated to use React 18 because of concurrent mode.

1. I see nothing in the library that requires any React 18 features
2. This version does not work with Preact 10.x as preact/compat only currently works with React versions < 18

cloning this repo and downgrading the React version to 17.x builds just fine and all the jest tests run and pass as well.

Am I missing something here that makes this version actually depend on React 18.x features ???

Steve

[smcardle]

Update.

This actually works fine now in my project using

npm install -D react-leaflet --legacy-peer-deps 

to install the react-leaflet library. All runs with React 17.x no issues

It also works fine with the correct CDN libraries running directly in the Browser using Preact 10.x with NO BUILD steps

Steve

[binarybaba]

Although this is a great workaround. This ideally doesn't work if you are using a monorepo managing tool such as NX which locks dependencies on the top level. In my case, I have intentionally locked React to 17^. Because I am going to be using the latest react-native which is always going to be 1 level below the current react - 17 at the time of writing this.

@PaulLeCam, I think it's worthwhile for [email protected] to peer-depend on the latest leaflet(v1.8.0) (since it is a library also for mobile) and in such a case, will inevitably used with react-native.

[smcardle]

This works just great for our use case.

We build our libraries using React 17.x a Rollup to chunk the code for use on the front end.

Our frontend runs in WebViews or directly in a browser requiring NO BUILD steps. To enable this we use importmaps for all runtime dependency libraries and map React using preact/compat. Our own libraries are hosted on our own CDN and we find esm module versions of all runtime dependencies.

The end result of this is we are able to build and deliver our solution to run inside our React Native client and the Browser with the same codebase that requires NO new app deployments via the app stores. Providing fixes to issues and new features in almost real time.

Steve

[PaulLeCam]

If you want to use React 17 it's up to you, but only v18 is supported by v4 so issues you might have with React v17 won't be investigated and fixed.