`inlineElements` optimization breaks on older browsers; discussion about Symbols and React.elementFromObject() API

See this https://github.com/babel/babel/issues/2517 and the associated discussion around the PR https://github.com/babel/babel/pull/2518, which I don’t expect to be merged due to loader issues.

To recap:

The inlineElements optimization requires brittle knowledge of internal React values, namely, $$typeof. This breaks on older browsers unless the developer globally polyfills Symbol, because Symbol will be polyfilled automatically by Babel in the user’s code, but will not be polyfilled in the React library. This causes ReactElement.isValidElement to fail as Symbol.for('react.element') !== 0xeac7.

Worse, this bug only occurs in older browsers that don’t implement Symbol, meaning that many devs won’t catch it right away as it will work fine in FF, Chrome, and (latest) Safari.

This is a hard issue to fix without globally polyfilling Symbol or giving up on the use of Symbol for $$typeof. Babel could automatically this as part of enabling the optimisation, but @loganfsmyth had a better idea - how about a React.elementFromObject() API?

This function would be nothing more than:

React.elementFromObject = function(obj) {
  invariant(obj && typeof obj === 'object', "Supply an object to React.elementFromObject.");
  obj.$$typeof = REACT_ELEMENT_TYPE;
  return obj;
}

This ensures that the REACT_ELEMENT_TYPE we are using is equal to the one used in ReactElement.isValidElement. It shouldn’t be necessary to do any validation in elementFromObject because it will be caught by isValidElement later on.

Thoughts?

[STRML]

@shubhamsizzles For now I put this in my browser entrypoint so all libs are using the same Symbol.

global.Symbol = require('core-js/es6/symbol'); // Fix react.inlineElements

[pastelsky]

Any progress of this? Is there a workaround for this till the issue is fixed that doesn’t involve adding babel-polyfill to the entry point? I tried using es6-symbol/implement polyfill, but that didn’t work.