browserify/webworkify

Problem using with CRA 1.0

stereobooster opened this issue · 3 comments

CRA stands for create-react-app. This repo is browserify plugin. You probably wonder how I get here with CRA, which in turn uses Webpack. Here is the story:

I'm trying to make react-mapbox-gl work with CRA. react-mapbox-gl is react component for mapbox-gl, which in turn use browserify and webworkify. I'm not sure if this problem of webworkify or not. I suppose because I see blobs and workers in stack trace. Tell me if this CRA/Webpack/Mapbox error.

Uncaught ReferenceError: e is not defined
Uncaught ReferenceError: e is not defined
33../support/isBuffer @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
104.util @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
131.../error/validation_error @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
145../reference/latest @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
159.../style-spec/validate_style.min @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
151.../style-spec/reference/latest @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
157.../style-spec/feature_filter @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
100.../style/style_layer_index @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
anonymous @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:3
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
t @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1 Uncaught ReferenceError: e is not defined
33../support/isBuffer @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
104.util @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
131.../error/validation_error @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
145../reference/latest @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
159.../style-spec/validate_style.min @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
151.../style-spec/reference/latest @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
157.../style-spec/feature_filter @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
100.../style/style_layer_index @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
anonymous @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:3
i @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
t @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1
(anonymous) @ blob:http://localhost:5000/fca6711b-f465-4d2d-a868-06d5196fac53:1

Related: alex3165/react-mapbox-gl#231

Note: prior CRA 1, for example 0.9.5, it worked fine.

To reproduce problem:

git clone https://github.com/stereobooster/react-mapbox-gl
cd react-mapbox-gl
git checkout webworkify-problem
cd example
yarn
yarn build 
# yarn global add serve
serve -s build

I hadn't noticed this bug when I started down this rabbit hole myself. See mishoo/UglifyJS#2011 for a long parallel path.

TLDR: it seems this (https://github.com/substack/webworkify/blob/master/index.js#L63) code is violating some assumption that uglify is making, I suspect it's the same problem with browserify.

@stereobooster note: CRA 1.0.7 has this problem worked around, but it seems to me there's still an incompatibility between webworkify and uglify's comparisons compression assumptions.

Great find, thank you @kzc! Looks like there's nothing we can do on the webworkify side to fix the issue then. Hopefully there will be a solution upstream.