react-measure: ResizeObserver Polyfill creates errors with Webpack & UglifyJS
New dev on the team tried to npm install our package.json and got the following error:
ERROR in bundle.js from UglifyJs
SyntaxError: Unexpected token: punc ()) [bundle.js:33478,18]
We had react-measure: "^1.3.1" in package.json and the caret made it upgrade to 1.4.x when that was released.
Looks like 1.4.x uses ResizeObserver polyfill which created the above error when webpack & uglifyjs are bundling. Technically you would be okay if you were to use uglifyjs harmony branch but since I don’t want to fork webpack and subsequently modify the fork’s package json, it’s easier to just pin react-measure to 1.3.1 to solve this.
Putting this here in case anyone else comes across it and something that you might want to think about since lotsa ppl use react with webpack and uglify in production.
About this issue
- Original URL
- State: closed
- Created 8 years ago
- Reactions: 1
- Comments: 15 (5 by maintainers)
Updated to webpack@2.2.0-rc.3 and seems like everything is working. Thanks for the help!
Still tackling this problem but for now I found that v. 3.4.0 works fine. My take is that it has something to do with webpack@2.1.0-beta.25 which is used in the earlier version of react-boilerplate.
Yeap, fixed in webpack@2.2.0-rc.0 (https://github.com/webpack/webpack/issues/3168)
This and #27 issues were caused by the
modulefield in the package file which pointed to a es6 version of the polyfill. I’ve removed it and now Webpack 2 takes the es5 umd bundle which always exports the ResizeObserver constructor instead of an object with thedefaultproperty.I’ve also added a fallback for a non-browser environment which fixes the server rendering problem described in #24.
These changes are available in v 1.3.1 and I believe that now you can remove all of those conditions.
Guys, I’m really sorry about this mess. Why you didn’t tell me about those problems in the first place? I would have fixed them long ago.