ReferenceError: _wrapNativeSuper is not defined

[cns-solutions-admin]

I have upgraded our (quite large) react application to MapLibre 2.2.0-pre.3:
It builds, but when the map should be shown, I get

ReferenceError: _wrapNativeSuper is not defined

(at least the first such error seems to occur with ajax.ts)

I've tried everything mentioned in #1011, but still no success (we never supported IE).
As I understand _wrapNativeSuper is something introduced by building with babel or so.

Are there any minimum versions for React, babel, webpack or other build-related libraries?

[HarelM]

I'm using angular and ngx-maplibre as a wrapper without any issues.
I suggest to open a issue with the relevant wrapper you use as this is not an issue with this library as far I understand...

[cns-solutions-admin]

It most probably is no problem with maplibre per se, but with maplibre 1.5 everything was fine and the only change was upgrading maplibre and fixing the compile problems. And the problem does only occur, when activating the map view.

So, maybe the build process or some relevant dependencies changed in maplibre between 1.5 and 2.2?
Something important must have changed as indicated by #1011, where only some obscure workaround is mentioned (which doesn't work for me).
Any hints are welcome.

[HarelM]

We moved to type: "module" in order to allow new language features from node js for our development.

maplibre-gl-js/package.json

Line 13 in 952f1cd

"type": "module",

But the library itself is still exported as commonjs which is the major change you are talking about.
This is why we are adding a package.json file to indicate that in the dist folder:
https://unpkg.com/browse/maplibre-gl@2.2.0-pre.3/dist/package.json
I know that webpack adheres to that file, not sure about other packagers...
I'm converting this to a discussion with your permission...

[Vladuxexel]

I had the same issue. My solution was to set "target" to "es6" or higher in tsconfig.json compilerOptions

[ffischer1984]

have the same issue but don't use typescript.
Funfact:

• an example-project with react 18.2.0 and maplibre 2.1.9 works fine
• but the complex project with react 18.2.0 and maplibre 2.1.9 throws this _wrapNativeSuper is not defined error. This project uses ReactAdmin, too.

Have even tried it with typescript, target es6 and maplibre 2.1.9 and get the same error. @Vladuxexel could you post tsconfig.json please.

[Vladuxexel]

Of course. My tsconfig.json looks like this:
{ "compilerOptions": { "moduleResolution": "node", "target": "es5", "module": "commonjs", "sourceMap": true, "experimentalDecorators": true, "emitDecoratorMetadata": true, "skipDefaultLibCheck": true, "lib": ["es6", "dom"], "types": ["node"], "skipLibCheck": true, "typeRoots": ["node_modules/@types"] }, "exclude": ["bin", "node_modules"] }

[jakubmank]

We had same problem and setting target to es6 (from es5) fixed problem. Tech stack: Angular 12 + AngularJS and maplibre-gl: 2.4.0

[jeremy-homes]

I had this issue too with an angular project, turns out I was still supporting IE 9-11 in the .browserslistrc file I changed it to

last 1 Chrome version
last 1 Firefox version
last 2 Edge major versions
last 2 Safari major versions
last 2 iOS major versions
Firefox ESR

And it works, you might want to see if you have that file, I believe it can live inside the package.json too

[lucaswoj]

Just in case anyone else runs into this issue, it is related to this upstream bug browserslist/browserslist#374, and the minimal fix is to add not android 4.4.3-4.4.4 to your browserslist settings.

[Snailedlt]

How do we add this to the browserlists settings? Do we have to create a config file?

[Snailedlt]

We get the same error, but only on windows. It works fine on linux and on macOS. Any ideas for potential fixes?