React: React cannot be compiled with latest Google Closure Compiler
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
All 40 comments
See https://github.com/google/closure-compiler/pull/1503, https://github.com/google/closure-compiler/commit/2d596c44700113f3cd1685a70d899639c10cec8c.
jochenberger
on 24 Aug 2016
Do you know how to fix this?
gaearon
on 24 Aug 2016
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
on 24 Aug 2016
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
on 10 Oct 2016
See also #824
jochenberger
on 11 Oct 2016
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.
gaearon
on 11 Oct 2016
I'd appreciate if someone else could create the PR, because I don't want to sign the CLA.
jochenberger
on 11 Oct 2016
Probably I can do it
Shastel
on 11 Oct 2016
Still failing with React 15.3.2 (as well as 15.4.0-rc.2) and Closure Compiler v20161024.
jochenberger
on 26 Oct 2016
Since nobody worked on it, the issue did not advance. If you'd like to contribute please feel free to.
gaearon
on 26 Oct 2016
@gaearon now i'm working on removing GCC anotations and plan to create pr tomottow or day after
Shastel
on 26 Oct 2016
thanks @Shastel
jochenberger
on 26 Oct 2016
Thanks!
gaearon
on 26 Oct 2016
Hey guys what's the current status?
followdarko
on 15 Nov 2016
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.
jribeiro
on 25 Jan 2017
Fixed via #8882
jochenberger
on 12 Apr 2017
Yep, thank you!
gaearon
on 12 Apr 2017
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 :(
elijahsmith
on 18 Apr 2017
Thank you
psenger
on 18 Apr 2017
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?
gaearon
on 18 Apr 2017
@gaearon i will do it
Shastel
on 18 Apr 2017
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.
elijahsmith
on 18 Apr 2017
@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
aweary
on 19 Apr 2017
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
on 17 May 2017
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?
elijahsmith
on 1 Jun 2017
Merged https://github.com/facebook/react/issues/9933, will be out soon.
gaearon
on 12 Jun 2017
This should be fixed in [email protected]. Please verify, it will become 15.6.0 tomorrow.
gaearon
on 14 Jun 2017
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.
jochenberger
on 14 Jun 2017
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.
gaearon
on 14 Jun 2017
@gaearon is React 15 supports ie8 and bellow?
Shastel
on 14 Jun 2017
No.
gaearon
on 14 Jun 2017
@gaearon so, we can ignore GCC warn about ie8
Shastel
on 14 Jun 2017
Ah, I see. Regardless, this was easy to fix, so I added the fix for 15.6.0 final (which I'll cut soon).
gaearon
on 14 Jun 2017
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.
jochenberger
on 14 Jun 2017
Sorry, I haven't published the version without trailing commas yet. Doing some final testing.
gaearon
on 14 Jun 2017
You can always check the results using http://closure-compiler.appspot.com/home#code or https://developers.google.com/closure/compiler/docs/api-tutorial1
jochenberger
on 14 Jun 2017
[email protected] is out with fixes.
gaearon
on 14 Jun 2017
Works fine AFAICT, thanks!
jochenberger
on 14 Jun 2017
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.
gaearon
on 14 Jun 2017
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;
etroynov
on 28 Feb 2018
Related issues
bloodyowl
路
3Comments
varghesep
路
3Comments
DimitarChristoff
路
3Comments
tleunen
路
3Comments
Prinzhorn
路
3Comments
Most helpful comment
@gaearon now i'm working on removing GCC anotations and plan to create pr tomottow or day after