search

visgl / react-map-gl

React friendly API wrapper around MapboxGL JS
http://visgl.github.io/react-map-gl/
Other
7.88k stars 1.36k forks source link

[Bug] Can’t resolve mapbox-gl when building #2314

Closed kevinjmo closed 1 year ago

kevinjmo commented 1 year ago

Description

I’ve been using react-map-gl with mapbox-gl and recently, I switched to use maplibre-gl instead. When removing mapbox-gl from the package.json and doing a clean install (while generating a clean package-lock.json), I get the following error

Module not found: Error: Can't resolve 'mapbox-gl' in '/Users/kevinmo/Developer/…/node_modules/react-map-gl/dist'

This happens even when using 7.2.0-beta.1. However, if I keep my old package-lock.json and just do a npm uninstall mapbox-gl then it seems to work as the old mapbox-gl dependency is still in the package-lock.json.

It seems to be fixed when doing the previous npm:empty-npm-package@^1.0.0 placeholder, but the upgrade guide for 7.1 suggests that it should not be needed anymore.

Expected Behavior

It should work without needing the placeholder or adding config.externals = ['mapbox-gl'] to the webpack config.

Steps to Reproduce

  1. Have a project that was previously using react-map-gl with mapbox-gl.
  2. Then, remove mapbox-gl and replace it with maplibre-gl.
  3. Perform a clean install and regenerate the package-lock.json file.
  4. When building the project, the error will occur.

Environment

Logs

No response

Pessimistress commented 1 year ago

Not sure what you did exactly when you say "remove mapbox-gl and replace it with maplibre-gl". My guess is you are still importing something from react-map-gl not react-map-gl/maplibre.

kevinjmo commented 1 year ago

Not sure what you did exactly when you say "remove mapbox-gl and replace it with maplibre-gl".

What I meant is that instead of using the mapbox-gl as the mapLib, I am switching to use maplibre-gl.

My guess is you are still importing something from react-map-gl not react-map-gl/maplibre.

That is incorrect. I am importing from react-map-gl/maplibre.

In my issue description, I mentioned that this error throws at the bundle step with Webpack. I believe that the ESM export from react-map-gl is not properly configured in v7.1 so we still have to install a placeholder mapbox-gl as a dependency or set config.externals = ['mapbox-gl'].

Pessimistress commented 1 year ago

I suggest you create a repo that reproduces your issue. You can use https://github.com/visgl/react-map-gl/tree/master/examples/get-started/maplibre as a starting point.

kevinjmo commented 1 year ago

My apologies, @Pessimistress – you are right; I didn’t realize I also had to update my other imports (eg. Marker, Source, useMap, etc.) to also import from react-map-gl/maplibre instead.

Once I updated those imports, it’s working perfectly.

Thank you again for your help and patience! I really appreciate all the work and time you put into this project :)