Create-react-app: 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.
https://github.com/mapbox/mapbox-gl-js/issues/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.
https://github.com/mapbox/mapbox-gl-js/issues/4348#issuecomment-339755919

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:
https://github.com/mapbox/mapbox-gl-js/issues/7354
https://github.com/mapbox/mapbox-gl-js/issues/3422
https://github.com/mapbox/mapbox-gl-js/issues/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:
https://github.com/babel/babel/issues/4125#issuecomment-385247320

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

Possible workaround:
https://github.com/mapbox/mapbox-gl-js/issues/3422#issuecomment-255168449
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?

[Timer]

Appears fixed via #5278, tested with repro given in OP. This will be out in 2.0.4.

[Timer]

This fix is out in 2.0.4! Please upgrade and test.

[ChiefORZ]

Dan the Man. 🤘

[Timer]

It's still worthwhile to note the way mapbox is generating their workers is very fragile and they will be prone to more breakages like this in the future. We should keep pressing for them to fix this on their end.

[cpannwitz]

Thanks for investigating @Timer and @gaearon !
Fix is working so far.

You're right, this whole Webworker-Babel-thingy is slightly fragile.

[mourner]

It's still worthwhile to note the way mapbox is generating their workers is very fragile and they will be prone to more breakages like this in the future. We should keep pressing for them to fix this on their end.

@Timer hey Joe, thanks for looking into this issue! Can you elaborate on your suggestion?

We set up the worker bundling this way because most of the code is shared between the main thread and the workers, and we couldn't afford duplicating that code in the bundle (it's already pretty big and e.g. embedding a worker as a string would nearly double the size). On the other hand, we also couldn't bundle workers separately because because that would be pretty confusing for users (e.g. having to specify workerURL every time, etc.).

So splitting the code into three chunks (shared, main, worker) and re-bundling them to initialize workers dynamically with a blob was the only option we found that satisfied both concerns.

Do you see any other options or improvements for us that would make the setup less fragile to issues like this one?

[gaearon]

Could you do the toString step at compile time when the package is published?

[mourner]

@gaearon that's what I meant in the first point — we can't embed worker code as a string in the bundle because it would almost double the bundle size.

[digitalkaoz]

in react-static we do the same, but we use Babel7 and there doing exclude: ['@babel/plugin-transform-typeof-symbol'] wont work like in CRA...

anyone tried this with Babel7?

//cc @tannerlinsley