ResizeObserver Polyfill creates errors with Webpack & UglifyJS

[terencechow]

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.

[souporserious]

Sorry about that 😞 Is there anything we can do to fix this? Or maybe it is an issue in the polyfill library?

Thinking more about it and wondering what's causing this. I'm using UglifyJS for the demo build here https://github.com/souporserious/react-measure/blob/master/webpack.config.js#L37-L49 and it seems fine. Maybe I'm missing something.

[terencechow]

Might be because I'm using webpack 2 beta?

[thebuilder]

Also getting a ResizeObserver error - Running Webpack 2:

scripts/0-d1a73d3a1dcc35893472.chunk.js from UglifyJs
SyntaxError: Unexpected token: name (ResizeObserver) [./~/resize-observer-polyfill/index.js:3,0][scripts/0-d1a73d3a1dcc35893472.chunk.js:2526,4]

[souporserious]

Sorry, I'm not sure what is causing this 😞 I wish I could help. Please feel free to create a PR if you find a solution.

[robwise]

I was able to get around this by not using exclude or include with my Webpack babel-loader. I believe what's going on is that this library is ES6 code and the Uglifier plugin is having trouble parsing it for whatever reason. Running the package through babel seems to fix the issue.

[que-etc]

This and #27 issues were caused by the module field 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 the default property.

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.

[souporserious]

Out in the latest release. Thanks @que-etc! I appreciate the help. I was unaware it was your library that was causing the issue. I thought it had something to do with what I was doing.

Please feel free to re-open this if the issue still occurs.

[marcandrews]

I am trying to use react-measure@1.4.5 with react-boilerplate@3.3.3 and I am getting the following error when running the development server:

Uncaught (in promise) TypeError: _resizeObserverPolyfill2.default is not a constructor
    at Measure.componentDidMount (eval at ./node_modules/react-measure/lib/Measure.js (0.chunk.js:278), <anonymous>:105:29)
    at eval (ReactCompositeComponent.js:264)
    at measureLifeCyclePerf (ReactCompositeComponent.js:74)
    at eval (ReactCompositeComponent.js:263)
    at CallbackQueue.notifyAll (CallbackQueue.js:67)
    at ReactReconcileTransaction.close (ReactReconcileTransaction.js:81)
    at ReactReconcileTransaction.closeAll (Transaction.js:204)
    at ReactReconcileTransaction.perform (Transaction.js:151)
    at ReactUpdatesFlushTransaction.perform (Transaction.js:138)
    at ReactUpdatesFlushTransaction.perform (ReactUpdates.js:90)

Is this error related to this issue?

Sorry, I'm still new to React/Babel/Webpack2, but is there any additional information you need to help me solve this issue?

[souporserious]

@que-etc any idea on the above?

[que-etc]

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 (webpack/webpack#3168)

[que-etc]

@marcandrews would you please try updating to webpack 2.2?

[marcandrews]

@que-etc @souporserious giving it a try now and will report back. Thanks.

[marcandrews]

Updated to webpack@2.2.0-rc.3 and seems like everything is working. Thanks for the help!

[souporserious]

Thanks for the help @que-etc 🎉

[designbyadrian]

Was running Webpack 2.1.0-beta.25. Updating to ^2.2.0 (2.2.1 at the time of writing) fixed my problem.