CRA 2 breaks the use of mapbox-gl: Uncaught ReferenceError: _typeof is not defined

[ChiefORZ]

Is this a bug report?

Yes

Did you try recovering your dependencies?

Reproducable on a newly created app

Environment

System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz
Binaries:
Node: 10.9.0 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
Browsers:
Chrome: 69.0.3497.100
Firefox: 61.0.2
Safari: 12.0
npmPackages:
react: ^16.5.2 => 16.5.2
react-dom: ^16.5.2 => 16.5.2
react-scripts: 2.0.3 => 2.0.3
npmGlobalPackages:
create-react-app: Not Found

First Try

https://gist.github.com/ChiefORZ/d2e77d2a3dd3703a54c8fd6fecf3f921

create-react-app temp-mapbox
cd temp-mapbox
yarn add react-map-gl
yarn start

create-react-app 2 should work with mapbox-gl.
mapbox-gl breaks, because of Uncaught ReferenceError: _typeof is not defined.
searching the webs for this error seems, that this error occurs when webpack uglifies the already uglified bundle and there the reference to _typeof gets removed.
mapbox/mapbox-gl-js#4359

i think this error occurs with cra 2 again, because it got updated to use webpack 4?!

Second Try

https://gist.github.com/ChiefORZ/8a06af95cbe1acd4e1fd4d37e970e5ca

then i thought i follow the recommended solutions by excluding mapbox-gl from webpack build.
mapbox/mapbox-gl-js#4348 (comment)

but unfortunately this is not working as well, because it doesn't use webpack_require and therefore Uncaught ReferenceError: require is not defined

Thanks for the help!

[mAiNiNfEcTiOn]

Hi @ChiefORZ, just trying to reproducing that. Used codesandbox.io, which uses the 2.0.3's create-react-app template... seems to be using it properly: https://codesandbox.io/s/kmq3vol6vo

No errors there :/

[mAiNiNfEcTiOn]

I know added a valid token to test it ... Still works fine 👍

[ChiefORZ]

hmm, weird...

can i ask you to try it out locally? for me and my colleagues it's not working at all.

we re-installed all packages, tried cleaning the yarn cache... but nothing seems to help

[themre]

deleted node_modules? :)

[mAiNiNfEcTiOn]

@ChiefORZ in terms of rendering, works... strangely, doesn't render the map but I guess that's some API's limitation?

[themre]

if you don't have any errors, that this should be that. you would need to add probably raster or vector layers etc. but that is other field :)

[gaearon]

this error occurs when webpack uglifies the already uglified bundle and there the reference to _typeof gets removed.

This doesn’t make sense to me as an explanation. Running Uglify many times on a bundle shouldn’t cause issues.

So there’s a bug here.. somewhere.

Your second attempt is expected to not work. “React App Rewired” is a completely unsupported project and can cause all sorts of issues. And it’s not expected to work with 2.x. It has no active maintainer at the moment.

[themre]

@gaearon for all cra-rewired/custom-scripts users... should be point them to at least some repo that has some maintance involved? such as https://github.com/arackaf/customize-cra which currently can at least work with CRA 2?

[gaearon]

Yeah it would be nice to point them somewhere.

[cpannwitz]

I can confirm the issue (locally).

I'm working on a company project with React-Map-Gl & React-Mapbox-Gl libraries and both are breaking since we updated to CRAv2(.0.3).
I also have visited the codesandbox mentioned earlier, where it's working, but setting up a plain new project via npx create-react-app jo && cd jo && yarn add react-map-gl && yarn start does indeed throw the Uncaught ReferenceError: _typeof is not defined error.

Both libraries are working with CRAv1.

Reference Issues:
mapbox/mapbox-gl-js#7354
mapbox/mapbox-gl-js#3422
mapbox/mapbox-gl-js#4359

[gaearon]

Have you looked into why? We need to pinpoint the reason.

[cpannwitz]

After following the trace, this seems to be an option for the failure:
babel/babel#4125 (comment)

tl;dr: react-map-gl uses Web Workers, _typeof doesn't exist there, babel-helpers are not getting included ?

Possible workaround:
mapbox/mapbox-gl-js#3422 (comment)
Excluding mapbox-gl from node_modules in webpack config (which isn't possible in CRA without custom scripts)

[Timer]

Is there a way we can inject Babel helpers? I'm not familiar with this code base, can you show me when the web-worker comes into play?

[gaearon]

_typeof doesn't exist there, babel-helpers are not getting included

This is the weird part. I don't understand what "not getting included" means in this case. What is the code before and after running Babel?