Cannot assign to import "accessToken" error on Remix

[maciej-adamus]

I am trying to use the library in Remix environment. When I import and use the map component, I am getting this error:

X [ERROR] Cannot assign to import "accessToken"

     node_modules/react-mapbox-gl/lib-esm/map.js:59:25:
       59 │                 MapboxGl.accessToken = accessToken;
          ╵                          ~~~~~~~~~~~
   
      Imports are immutable in JavaScript. To modify the value of this import, you must export a setter function in the imported file (e.g. "setAccessToken") and then import and call 
that function here instead.
   
   
    Build failed with 1 error:
    node_modules/react-mapbox-gl/lib-esm/map.js:59:25: ERROR: Cannot assign to import "accessToken"

Here it says that since v1.2 the accessToken can be passed as a parameter to Map constructor. Why not do it that way?

[rawnly]

same problem here!

[maciej-adamus]

My solution was to switch to react-map-gl

[rawnly]

My solution was to switch to react-map-gl

Thanks it worked for me too

[jarrisondev]

Same problem

[lduchuy2002]

Add this to your bundler:
resolve: {
alias: [{ find: /^react-mapbox-gl+$/, replacement: 'react-mapbox-gl/lib' }]
},
Add this to your index.tsx file:
if (typeof window !== 'undefined') {
Object.getOwnPropertyDescriptor(mapboxgl, 'accessToken')?.set?.(${your token})
}

Hope this would help you