React cannot be compiled with latest Google Closure Compiler

[jochenberger]

When trying to compile React 15.3.1 with the latest Closure Compiler, the following output is produced:

react.js:13694: WARNING - Misplaced @abstract annotation. only functions or non-static methods can be abstract
  getTransactionWrappers: function () {
  ^

react.js:14161: WARNING - Misplaced @abstract annotation. only functions or non-static methods can be abstract
  getTransactionWrappers: function () {
  ^

react.js:16952: WARNING - Misplaced @abstract annotation. only functions or non-static methods can be abstract
  getTransactionWrappers: null,
  ^

react.js:4782: ERROR - @nosideeffects may only appear in externs files.
  render: SpecPolicy.DEFINE_ONCE,
  ^

1 error(s), 3 warning(s)

The last one is an errors, the others are warnings.
To reproduce:

$> wget https://dl.google.com/closure-compiler/compiler-latest.zip
$> unzip compiler-latest.zip
$> wget https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js
$> java -jar closure-compiler-*.jar --js react.js

[jochenberger]

See google/closure-compiler#1503, google/closure-compiler@2d596c4.

[gaearon]

Do you know how to fix this?

[jochenberger]

No, sorry. Removing the @nosideeffects annotation from ReactClass.js will make it compile, but I'm not sure if that's a valid fix. I tried to find some clue in the commit history as to who added the annotation and when, but it was already present in the "Initial public release" commit.

[jochenberger]

I think that the annotation should be removed. It is apparently Closure-Compiler-speific (https://github.com/google/closure-compiler/wiki/Annotating-JavaScript-for-the-Closure-Compiler#nosideeffects-modifies-thisarguments), but it currently serves no other purpose than to break the minification.

[jochenberger]

See also #824

[gaearon]

Can you please send a PR removing all GCC annotations?
I think GCC support was intended at some point but it's been broken for ages.

[jochenberger]

I'd appreciate if someone else could create the PR, because I don't want to sign the CLA.

[Shastel]

Probably I can do it

[jochenberger]

Still failing with React 15.3.2 (as well as 15.4.0-rc.2) and Closure Compiler v20161024.

[gaearon]

Since nobody worked on it, the issue did not advance. If you'd like to contribute please feel free to.

[Shastel]

@gaearon now i'm working on removing GCC anotations and plan to create pr tomottow or day after

[jochenberger]

thanks @Shastel

[gaearon]

Thanks!

[followdarko]

Hey guys what's the current status?

[jribeiro]

Hi, just bumped into this. After removing the @nosideeffects annotation I compiled my code successfully and managed to reduce the size of my app about 20%.
https://github.com/facebook/react/blob/master/src/isomorphic/classic/class/ReactClass.js#L172

I see there's a commit above but there doesn't seem to be a PR (?), happy to contribute if needed.

[jochenberger]

Fixed via #8882

[gaearon]

Yep, thank you!

[elijahsmith]

the @nosideeffects annotation is still showing up in the current create-react-class npm package (15.5.2) and, thus, is still breaking my build :(

[psenger]

Thank you

[gaearon]

the @nosideeffects annotation is still showing up in the current create-react-class npm package (15.5.2) and, thus, is still breaking my build :(

Sorry about that. Want to send a PR against 15.5-dev branch to remove it?

[Shastel]

@gaearon i will do it

[elijahsmith]

thank you guys for the prompt attention. @gaearon I'm a little star struck, I've been an admirer ever since the original redux presentation.

fwiw it appears that create-react-class just needs to be republished with the current class -- though it's not clear to me how that package is being generated.

[aweary]

@elijahsmith it's a little confusing since the addon doesn't live in the master branch anymore. You can find it on the 15.5-dev branch in the addons folder: https://github.com/facebook/react/tree/15.5-dev/addons/create-react-class

[elijahsmith]

I'm finally getting back around to this after some distractions. I noticed that a new version of create-react-class had been published to npm, but it looks like it's still based on the 15.5.0 code.

Is this as simple as creating a PR with the dependencies in the create-react-class package.json updated? I can take a crack at that if so... what branch should it be made against?

[elijahsmith]

we are blocked on this issue (our build system relies on the Closure Compiler, and some of our dependencies use create-react-class). Is there anything I can do to help this process forward?

[gaearon]

Merged #9933, will be out soon.

[gaearon]

This should be fixed in create-react-class@15.6.0-rc.0. Please verify, it will become 15.6.0 tomorrow.

[jochenberger]

Now, GCC complains about trailing commas in object literals:

create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:116: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    prop: 'prop',
    ^
create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:160: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    mixins: 'DEFINE_MANY',
    ^
create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:383: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    displayName: function(Constructor, displayName) {
    ^
create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:779: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    componentDidMount: function() {
    ^
create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:785: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    componentWillUnmount: function() {
    ^
create-react-class.js COMPRESSABLE lastModified: Mi Jun 14 08:21:36 MESZ 2017 size: 39610>:799: ERROR - Parse error. IE8 (and below) will parse trailing commas in array and object literals incorrectly. If you are targeting newer versions of JS, set the appropriate language_in option.
    replaceState: function(newState, callback) {
    ^

The error positions seem to be wrong though.

[gaearon]

If we fix those trailing commas, are there any more issues? It's a bit frustrating we don't have the whole list of issues and have to fix them one by one.

[Shastel]

@gaearon is React 15 supports ie8 and bellow?

[gaearon]

No.

[Shastel]

@gaearon so, we can ignore GCC warn about ie8

[gaearon]

Ah, I see. Regardless, this was easy to fix, so I added the fix for 15.6.0 final (which I'll cut soon).

[jochenberger]

It's not a warning, it's an error. The behavior depends on the language level that is set for GCC.
@gaearon I'll try the new build now.

[gaearon]

Sorry, I haven't published the version without trailing commas yet. Doing some final testing.

[jochenberger]

You can always check the results using http://closure-compiler.appspot.com/home#code or https://developers.google.com/closure/compiler/docs/api-tutorial1

[gaearon]

create-react-class@15.6.0 is out with fixes.

[jochenberger]

Works fine AFAICT, thanks!

[gaearon]

Thanks for reporting all the issues! Sorry we haven't been acting very fast. The good news is we revamped how addons are built, so it's very unlikely we'll have more issues there, and if you find something, we'll be able to fix them much faster now.

[etroynov]

The same problem

bundler: webpack 4.0.1
GCC: closure-compiler-v20180204.jar

ERROR in main.js from Closure Compiler
The compiler is waiting for input via stdin.
stdin:105: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
   * @param {function} callback Callback function.
                     ^

stdin:131: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
   * @param {function} callback Callback function.
                     ^

stdin:1108: WARNING - Suspicious code. The result of the 'void' operator is not being used.
!React ? invariant(false, 'ReactDOM was loaded before React. Make sure you load the React package before loading ReactDOM.') : void 0;
                                                                                                                               ^^^^^^

stdin:1170: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !!properties.hasOwnProperty(propName) ? invariant(false, "injectDOMPropertyConfig(...): You're trying to inject DOM property '%s' which has already been injected. You may be accidentally injecting the same DOM property config twice, or you may be injecting two configs that have conflicting property names.", propName) : void 0;
                                                                                                                                                                                                                                                                                                                                       ^^^^^^

stdin:1188: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !(propertyInfo.hasBooleanValue + propertyInfo.hasNumericValue + propertyInfo.hasOverloadedBooleanValue <= 1) ? invariant(false, "DOMProperty: Value can be one of boolean, overloaded boolean, or numeric value, but not a combination: %s", propName) : void 0;
                                                                                                                                                                                                                                                               ^^^^^^

stdin:1486: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !(typeof injectedErrorUtils.invokeGuardedCallback === 'function') ? invariant(false, 'Injected invokeGuardedCallback() must be a function.') : void 0;
                                                                                                                                                     ^^^^^^

stdin:1704: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(pluginIndex > -1) ? invariant(false, 'EventPluginRegistry: Cannot inject event plugins that do not exist in the plugin ordering, `%s`.', pluginName) : void 0;
                                                                                                                                                             ^^^^^^

stdin:1708: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !pluginModule.extractEvents ? invariant(false, 'EventPluginRegistry: Event plugins must implement an `extractEvents` method, but `%s` does not.', pluginName) : void 0;
                                                                                                                                                                    ^^^^^^

stdin:1712: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !publishEventForPlugin(publishedEvents[eventName], pluginModule, eventName) ? invariant(false, 'EventPluginRegistry: Failed to publish event `%s` for plugin `%s`.', eventName, pluginName) : void 0;
                                                                                                                                                                                                    ^^^^^^

stdin:1726: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !!eventNameDispatchConfigs.hasOwnProperty(eventName) ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same event name, `%s`.', eventName) : void 0;
                                                                                                                                                                               ^^^^^^

stdin:1753: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !!registrationNameModules[registrationName] ? invariant(false, 'EventPluginHub: More than one plugin attempted to publish the same registration name, `%s`.', registrationName) : void 0;
                                                                                                                                                                                    ^^^^^^

stdin:1812: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !!eventPluginOrder ? invariant(false, 'EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely trying to load more than one copy of React.') : void 0;
                                                                                                                                                                                 ^^^^^^

stdin:1836: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !!namesToPlugins[pluginName] ? invariant(false, 'EventPluginRegistry: Cannot inject two different event plugins using the same name, `%s`.', pluginName) : void 0;
                                                                                                                                                                 ^^^^^^

stdin:1897: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
 * @param {function} listener Application-level callback
                   ^

stdin:1966: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(next != null) ? invariant(false, 'accumulateInto(...): Accumulated items must not be null or undefined.') : void 0;
                                                                                                                ^^^^^^

stdin:1997: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
 * @param {function} cb Callback invoked with each element or a collection.
                   ^

stdin:2101: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
 * @return {?function} The stored callback.
                     ^

stdin:2122: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(!listener || typeof listener === 'function') ? invariant(false, 'Expected `%s` listener to be a function, instead got a value of `%s` type.', registrationName, typeof listener) : void 0;
                                                                                                                                                                                       ^^^^^^

stdin:2181: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !!eventQueue ? invariant(false, 'processEventQueue(): Additional events were enqueued while processing an event queue. Support for this has not yet been implemented.') : void 0;
                                                                                                                                                                            ^^^^^^

stdin:2786: WARNING - Bad type annotation. missing opening ( See https://github.com/google/closure-compiler/wiki/Bad-Type-Annotation for more information.
 * @param {function} Class
                   ^

stdin:2881: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(event instanceof EventConstructor) ? invariant(false, 'Trying to release an event instance  into a pool of a different type.') : void 0;
                                                                                                                                     ^^^^^^

stdin:3334: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(fiberHostComponent && typeof fiberHostComponent.restoreControlledState === 'function') ? invariant(false, 'Fiber needs to be injected to handle a fiber target for controlled events. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                                                                                                                   ^^^^^^

stdin:4161: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(isFiberMountedImpl(fiber) === MOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
                                                                                                                  ^^^^^^

stdin:4169: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(state !== UNMOUNTED) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
                                                                                                  ^^^^^^

stdin:4259: WARNING - Suspicious code. The result of the 'void' operator is not being used.
        !didFindChild ? invariant(false, 'Child was not found in either parent set. This indicates a bug in React related to the return pointer. Please file an issue.') : void 0;
                                                                                                                                                                           ^^^^^^

stdin:4263: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(a.alternate === b) ? invariant(false, 'Return fibers should always be each others\' alternates. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                               ^^^^^^

stdin:4267: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(a.tag === HostRoot) ? invariant(false, 'Unable to find node on an unmounted component.') : void 0;
                                                                                               ^^^^^^

stdin:4916: WARNING - Suspicious code. The result of the 'getprop' operator is not being used.
    anchorNode.nodeType;
    ^^^^^^^^^^^^^^^^^^^

stdin:4917: WARNING - Suspicious code. The result of the 'getprop' operator is not being used.
    focusNode$$1.nodeType;
    ^^^^^^^^^^^^^^^^^^^^^

stdin:6494: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(contextStackCursor.cursor == null) ? invariant(false, 'Unexpected context found on stack. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                       ^^^^^^

stdin:6529: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(contextKey in childContextTypes) ? invariant(false, '%s.getChildContext(): key "%s" is not defined in childContextTypes.', getComponentName(fiber) || 'Unknown', contextKey) : void 0;
                                                                                                                                                                                     ^^^^^^

stdin:6567: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !instance ? invariant(false, 'Expected to have an instance by this point. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                     ^^^^^^

stdin:6598: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(isFiberMounted(fiber) && fiber.tag === ClassComponent) ? invariant(false, 'Expected subtree parent to be a mounted class component. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                                                                 ^^^^^^

stdin:6606: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !parent ? invariant(false, 'Found unexpected detached subtree parent. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                   ^^^^^^

stdin:7229: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(typeof _callback === 'function') ? invariant(false, 'Invalid argument passed as callback. Expected a function. Instead received: %s', _callback) : void 0;
                                                                                                                                                         ^^^^^^

stdin:7488: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !props ? invariant(false, 'There must be pending props for an initial mount. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                          ^^^^^^

stdin:7631: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !(newProps != null) ? invariant(false, 'There should always be pending or memoized props. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                         ^^^^^^

stdin:7759: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(typeof child._store === 'object') ? invariant(false, 'React Component in warnForMissingKey should have a _store. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                                                ^^^^^^

stdin:7782: WARNING - Suspicious code. The result of the 'void' operator is not being used.
        !(ownerFiber.tag === ClassComponent) ? invariant(false, 'Stateless function components cannot have refs.') : void 0;
                                                                                                                     ^^^^^^

stdin:7785: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !inst ? invariant(false, 'Missing owner for string ref %s. This error is likely caused by a bug in React. Please file an issue.', mixedRef) : void 0;
                                                                                                                                                    ^^^^^^

stdin:7802: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !(typeof mixedRef === 'string') ? invariant(false, 'Expected ref to be a function or a string.') : void 0;
                                                                                                         ^^^^^^

stdin:7803: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !element._owner ? invariant(false, 'Element ref was specified as a string (%s) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).', mixedRef) : void 0;
                                                                                                                                                                                                                            ^^^^^^

stdin:8407: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(typeof iteratorFn === 'function') ? invariant(false, 'An object is not an iterable. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                   ^^^^^^

stdin:8433: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(newChildren != null) ? invariant(false, 'An iterable object provided no iterator.') : void 0;
                                                                                            ^^^^^^

stdin:8771: WARNING - Suspicious code. The result of the 'void' operator is not being used.
  !(current === null || workInProgress.child === current.child) ? invariant(false, 'Resuming work not yet implemented.') : void 0;
                                                                                                                           ^^^^^^

stdin:9029: WARNING - Suspicious code. The result of the 'void' operator is not being used.
      !(nextProps !== null) ? invariant(false, 'We should always have pending or current props. This error is likely caused by a bug in React. Please file an issue.') : void 0;
                                                                                                                                                                         ^^^^^^

stdin:9085: WARNING - Suspicious code. The result of the 'void' operator is not being used.
    !(current === null) ? invariant(false, 'An indeterminate component should never have mounted. This error is likely caused by a bug in React. Please file an issue.') : void 0;