react-map-gl keeps asking for mapbox-gl

[victcebesp]

Hello guys!

Today I tried to change from using mapbox-gl to use maplibre-gl and to do that I followed this tutorial. To be more precise, I removed the mapbox-gl dependency from my package.json and added maplibre-gl v2 to it. In addition, I passed maplibre to the Map component using the mapLib prop. After doing that, I run yarn install and once everything was installed, I run yarn start to launch the project again.

Once the project started, the following error prompted on screen:
./node_modules/react-map-gl/dist/esm/components/map.js Module not found: Can't resolve 'mapbox-gl' in '{MY_PATH}/node_modules/react-map-gl/dist/esm/components'

It looks like reat-map-gl is still looking for mapbox-gl. What am I missing?

Thank you very much!

[victcebesp]

What I think is happening is that on this line it is not recognizing the mapLib prop that I am supposly sending when instantiating the Map component from react-map-gl. Am I missing something?

Thanks!

[slaymance]

I had this same problem and figured out it was due to using Webpack. The problem definitely is due to the exact line you mentioned. Webpack treats the dynamic import() syntax as a split point to load as its own code chunk. To do this, it attempts to build the chunk at compile time. So in our case, it attempts to load the mapbox-gl chunk even before the mapLib variable is defined at runtime.

I think it's worth creating a new issue for this problem since this will be a common problem for any bundlers doing code splitting by not building at runtime.

The Webpack documentation regarding dynamic imports is kind of useful for understanding the issue: https://webpack.js.org/api/module-methods/#import-1

[victcebesp]

Thank you very much @slaymance por letting me know. I did not manage to find the reason why it was throwing this error and I was getting crazy hahahah.

I also think this is worth creating a new issue for this as a lot of people will have this issue...

[HelloJowet]

If you're using NextJS, add the following webpack configuration to your next.config.js file:

const nextConfig = {
  // route every mapbox-gl import to maplibre-gl
  webpack: config => {
    config.resolve.alias['mapbox-gl'] = 'maplibre-gl'
    return config
  },
}

module.exports = nextConfig

Credits: I found this solution in the maplibre-nextjs-ts-starter repo from @richard-unterberg

[juanmartin]

The equivalent for Vite, in your vite.config.ts file:

import { defineConfig } from "vite";

export default defineConfig({
  // ...
  resolve: {
    alias: {
      "mapbox-gl": "maplibre-gl",
    },
  },
});

Credits: comment above and google.