Create-react-app: "ReferenceError: Invalid left-hand side expression in postfix operation" in production build

[gaearon]

Update: if you see this, you have a buggy version of UglifyJS (2.8.0).

Run rm -rf node_modules and then npm install (or yarn).

Then verify that node_modules/uglify-js/package.json has at least 2.8.1 in the version field. If not, you might need to clean your cache, or update your lockfile or shrinkwrap.

Original Post

I see this both in Windows and OS X tests.

  Integration
    Environment variables
Error: Uncaught [ReferenceError: Invalid left-hand side expression in postfix operation]
    at reportException (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/helpers/runtime-script-errors.js:58:24)
    at processJavaScript (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:130:7)
    at HTMLScriptElementImpl._eval (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/nodes/HTMLScriptElement-impl.js:65:7)
    at /tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/browser/resource-loader.js:31:22
    at Object.check (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:85:11)
    at ResourceQueue.resume (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:119:12)
    at DocumentImpl.close (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/nodes/Document-impl.js:518:17)
    at Document.close (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/jsdom/lib/jsdom/living/generated/Document.js:322:27)
    at _callee$ (/tmp/tmp.sLfC3ipnAc/test-kitchensink/integration/initDOM.js:55:7)
    at tryCatch (/home/travis/build/facebookincubator/create-react-app/packages/babel-preset-react-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:64:40)
    at GeneratorFunctionPrototype.invoke [as _invoke] (/home/travis/build/facebookincubator/create-react-app/packages/babel-preset-react-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:299:22)
    at GeneratorFunctionPrototype.prototype.(anonymous function) [as next] (/home/travis/build/facebookincubator/create-react-app/packages/babel-preset-react-app/node_modules/babel-runtime/node_modules/regenerator-runtime/runtime.js:116:21)
    at step (/tmp/tmp.sLfC3ipnAc/test-kitchensink/integration/initDOM.js:13:191)
    at /tmp/tmp.sLfC3ipnAc/test-kitchensink/integration/initDOM.js:13:361
    at run (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:87:22)
    at /tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/babel-polyfill/node_modules/core-js/modules/es6.promise.js:100:28
    at flush (/tmp/tmp.sLfC3ipnAc/test-kitchensink/node_modules/babel-polyfill/node_modules/core-js/modules/_microtask.js:18:9)
    at nextTickCallbackWith0Args (node.js:489:9)
    at process._tickCallback (node.js:418:13) [ReferenceError: Invalid left-hand side expression in postfix operation]

[gaearon]

@Timer Any ideas? Seems to only occur for production build.

[Timer]

Junk builds are being produced.
examples:

window.webpackJsonp=function(t,r,i){for(var a,u,s=[];0<t.length;0++)

throw l.framesToPop=1,l}}var o=function(e){};e.exports=r},function(e,t,n){"use strict"



md5-01dad20737fe919a2a9efdaff84a3a0d



function r(e){for(var t=arguments.length-1,n="Minified React error #"+e+"; visit http://facebook.github.io/react/docs/error-decoder.html?invariant="+e;0<t;0++)

note 0++ / 0 everywhere

[Timer]

I have a feeling one of our dependencies had a dep that updated and introduced a bug. Not sure if webpack or babel's fault, but looks like a compilation issue.

I'll have time to look at this in a little bit.

[Timer]

I would be interested to know if the 0.9.x branch still builds. Just fired off a rebuild on 0.9.x/HEAD: https://travis-ci.org/facebookincubator/create-react-app/builds/205512060

[Timer]

https://github.com/mishoo/UglifyJS2 recently released, but not when this error started happening.

[Timer]

I'm going to bet the regression was introduced here:
https://github.com/mishoo/UglifyJS2/commit/4e49302916fe395f5c63992aa28c33392208fb27 and https://github.com/mishoo/UglifyJS2/commit/16cd5d57a5cf7f5750104df0e5af246708fd493f

They enabled something called reduce_vars by default, which I bet is replacing the loop variable with it's initial value.

[gaearon]

Good investigation.

[gaearon]

Shall we change our Uglify options in 0.9.3 to work around this?

[Timer]

I'm a bit tight on time for a few hours, but can you make a PR setting the uglify flag reduce_vars to false in the production webpack config and see if the PR CI passes?

[gaearon]

https://github.com/mishoo/UglifyJS2/issues/1516

[existentialism]

@Timer @gaearon I can send a PR 👍

[gaearon]

I'm on it

[gaearon]

https://github.com/facebookincubator/create-react-app/pull/1682

[Timer]

Wow! I can't believe I didn't see that bug report (maybe I should've looked, would've saved me a few mins 😆).

[gaearon]

OK, I think we don't need to fix it on our end because Uglify will push out a fix soon.
https://github.com/mishoo/UglifyJS2/issues/1516#issuecomment-283085402

[gaearon]

Fixed in [email protected].