Module parse failed: Unexpected token

[darwin2k]

mapbox-gl-js version: 2.6.0

browser: chrome Version 97.0.4692.8

Steps to Trigger Behavior

1. Upgrade npm package to V. 2.6.0
2. start react application

Actual Behavior

./node_modules/mapbox-gl/dist/mapbox-gl.js Module parse failed: Unexpected token (31:397957) You may need an appropriate loader to handle this file type.

when imported into my React-application
import mapboxgl from "mapbox-gl";

[ryanhamley]

I can't reproduce this with a simple create-react-app setup and importing v2.6. That being said, transpilation of GL JS v2+ is a known potential issue in some setups and you may be able to find a workaround in #10565. If you continue having issues, please contact Mapbox Support.

[kriscarle]

@darwin2k I just hit this too, if you import mapbox-gl/dist/mapbox-gl-dev the problematic line has an object spread operator. Try checking your babel preset-env targets. It looks like object spread needs Chrome >= 60 and Firefox >= 55 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

This also means the documentation at https://docs.mapbox.com/mapbox-gl-js/guides/install/#transpiling is old now? it suggests Chrome >52 but looks like 2.6 is bumped up the minimum versions?

In my case I'm using a 3rd party SDK that controls the preset-env targets so I'm following up with them.

[ryanhamley]

Good catch @kriscarle It does look like we may need to update the docs. FWIW, you can import mapbox-gl.js (not -dev) which won't have the object spread.

[ryanhamley]

@kriscarle What browser did you notice this on? And can you or @darwin2k say more about your build setups that are causing this? What version did you upgrade to 2.6 from? Did simply updating the browerslist solve the issue or did you have to do something else?

It's clear that the use of Object spread syntax in the projections work in 2.6 is the root cause but I've been unable to reproduce the issue and I'm unclear on why this would be an issue even without transpilation unless you were on an old browser that didn't support the syntax. If you can offer any insights, that might help us determine what is happening here.

I'm also going to re-open this since it seems like it may ultimately require some action on our end.

[darwin2k]

@ryanhamley
OK, I was just updating the npm mapbox-gl package from 2.5.1 to 2.6.0 at a running project.

However, I updated my whole webpack configuration.
webpack 3.10.0 --> 4.44.2
webpack-dev-server 2.11.1 -> 3.11.1
Because of this major update I had to rewrite the whole webpack.config.

After this, the error we are talking about does not occure anymore.
So I think its related to old versions of webpack or webpack-plugins .

[ryanhamley]

Thanks for the update! That's very helpful.

[kriscarle]

@ryanhamley In my case I'm using the Airtable Blocks SDK Airtable/blocks#18 They should maybe switch to using browerslist instead of hardcoded versions. I think babel-loader needs imports in node_modules to either be compatible with the target, or explicitly included for transpilation? The error is from Webpack running on Node 16, not from the browser.

[ryanhamley]

@darwin2k @kriscarle @ghc20

We published GL JS v2.6.1 which removes the Object spread syntax so your existing setups should work as expected. Thanks for helping us figure out the issue!