Variable only used in React component name is minified away.

When a variable is only used in React components it can’t find them and minify’s them away causing the code to break.

This issue is also in Eslint reporting 'components' is defined but never used at line 4 col 7 with the ‘no-unused-vars’ rule enabled.

Input:

'use strict';

function test() {
  var components = window.foo.bar;
  return <components.baz/>;
};

test();

Output:

'use strict';function test(){return window.foo.bar,React.createElement(components.baz,null)};test();

Related ESLint issue: https://github.com/eslint/eslint/issues/7418

[kangax]

@boopathi that sounds counter-intuitive, let’s just change it?

[kangax]

Actually, upon closer examination I see that it works correctly on master with passPerPreset.

require('babel-core').transform('!function(){ var bar = window.foo.bar; return <bar.baz /> }()', {
  passPerPreset: true, 
  presets: ['react', 'babili']
}).code;

"!function () {\n  var a = window.foo.bar;return React.createElement(a.baz, null);\n}();"