ESM build : reassignment of import and require

[camille-hdl]

Hello,

i'm trying to use react-mapbox-gl 4 with Rollup but I'm having problems :

1. The problem discussed here - how to reproduce

In short:

In node_modules/react-mapbox-gl/lib-esm/map.js, there is

import * as MapboxGl from 'mapbox-gl';
/* ... */
MapboxGl.accessToken = accessToken;

which throws Illegal reassignment to import 'MapboxGl'.

Since mapbox-gl has a default export, changing the first line to import MapboxGl from 'mapbox-gl'; fixes this problem.

2. A few lines later there is var isEqual = require('deep-equal');, which is causing problems since there is mixed ESM and CommonJS syntax in the same file, and this is the "module" entrypoint in package.json.

Of course I may be missing something here. If so, if someone has any experience getting react-mapbox-gl 4 working with Rollup, I'd appreciate any help.

For what it's worth, version 3.x works fine (but there is no esm build).

[mklopets]

does the 4.x commonjs version work for you?

[gmaclennan]

Hi I ran into what I think is a related issue when bundling with Webpack - the setter was not being called so MapboxGl.accessToken was set to my access token, but this setter was not called, so config.ACCESS_TOKEN was never set. This only started becoming a problem in the past month, so I am assuming that Webpack made a change to be more spec compliant and stop this working?

TL;DR I think the way this is written in ESM should not work, but it works in many bundlers because they are a little more lenient. I think the change @camille-hdl suggests should work.

[camille-hdl]

@mklopets I tried manually importing from the cjs build, but ran into other issues (I don't remember exactly but it was related to the mixed import / require syntax I described in the OP iirc)

[gmaclennan]

ah ok I see the code is written in TypeScript, so you need this * import to get the types. I'm not familiar enough with TypeScript to know the workaround for this.

[nrakochy]

Not sure if I was looking at the same issue, but you might try installing the mapbox-gl types directly

npm install -D @types/mapbox-gl 

Seems to have fixed my esm-typescript compiling error

[sirgalleto]

@camille-hdl did you manage to fix this?

[camille-hdl]

@sirgalleto I haven't found a workaround, that said I haven't tried to update it in a while (I stuck to 3.x for now), so I don't know if it's fixed now.

[sirgalleto]

@camille-hdl I was trying to use the latest version, but is still broken, now using 3.x as well.

I'm wondering what options we have for TypeScript, I have not too much experience using TS so I'm not sure about how to change the import * from MapgoxGL. I'll investigate a little bit and try to come with a solution.