Minify: Variable only used in React component name is minified away.

[hatched]

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

[boopathi]

related #158

[boopathi]

Try with passPerPreset: true option.

console.log(require('babel-core').transform(`
function test() {
  var components = window.foo.bar;
  return <components.baz/>;
};

test();
`, {
  presets: ['react', 'babili'],
  passPerPreset: true
}).code);

[hatched]

I did try with that and there was no change, I ended up simply not using the variable as a workaround.

However I'm also using the transform-react-jsx plugin instead of the react preset.

babel.transform(data, {
  presets: ['babel-preset-babili'],
  plugins: ['transform-react-jsx'],
  compact: true,
  comments: false
});

[jonashartwig]

I have some code es6 in react which works fine without babili. However after adding I get some errors.

I tried adding passPerPreset: true but then I get this error: Cannot read property 'path' of undefined
at removeUnreferencedId
here is .babelrc (all latest versions):

{
    "presets": ["es2015", "stage-1", "react", "babili"],
    "env": {
        "test": {
            "plugins": ["rewire"]
        }
    }
}

here it seems babili gets confused with the class and the variable having the same name so it explodes at widget.type somehome

class Widget extends React.Component {
    constructor(...props) {
        super(...props);
    }
    render() {
        const { widget, widgetMappings } = this.props,
            Widget = widgetMappings[widget.type];

        return (
            <Card initiallyExpanded={true} rounded={true}>
                <CardText expandable={true} style={{ padding: "0px" }}>
                    <Widget setting={widget.setting} />
                </CardText>
            </Card>
        );
    }
}

so if i rename Widget to WidgetInstance I get the error WidgetInstance is not defined during runtime.

class Widget extends React.Component {
    constructor(...props) {
        super(...props);
    }
    render() {
        const { widget, widgetMappings } = this.props,
            WidgetInstance = widgetMappings[widget.type];

        return (
            <Card initiallyExpanded={true} rounded={true}>
                <CardText expandable={true} style={{ padding: "0px" }}>
                    <WidgetInstance setting={widget.setting} />
                </CardText>
            </Card>
        );
    }
}

Anything else I can try?

regards

[forabi]

I have this issue too.

Here is the relevant code:

    const slope = getSlope(vector1);
    const { x1, x2, y1 } = vector2;
    const intercept = y1 - (slope * x1);
    const getY = (x: number) => (slope * x) + intercept;
    const parallel1 = {
      x1,
      y1,
      x2,
      y2: getY(x2),
    };
    return (
      <g>
        <line {...segmentProps} {...rest} {...vector1} />
        <line {...parallelProps} {...rest} {...parallel1} />
        <line {...segmentProps} {...rest} {...vector2} />
        <Arc vector1={parallel1} vector2={vector2} props={extendedProps} />
      </g>
    );

My .babelrc

{
  "sourceMaps": "both",
  "presets": [
    [
      "env",
      {
        "modules": false,
        "browsers": [
          "last 5 Chrome versions",
          "last 5 Firefox versions",
          "last 2 Edge versions"
        ]
      }
    ],
    "react",
    "stage-3"
  ],
  "env": {
    "production": {
      "plugins": [
        "transform-runtime",
        "minify-empty-function",
        "transform-inline-environment-variables",
        "transform-node-env-inline",
        "transform-remove-console",
        "transform-remove-debugger"
      ],
      "presets": [
        "react-optimize"
      ]
    },
    "sourceMaps": false
  }
}

My deps:

    "babel-cli": "^6.18.0",
    "babel-eslint": "^7.0.0",
    "babel-loader": "^6.2.5",
    "babel-plugin-minify-empty-function": "^0.0.1",
    "babel-plugin-transform-inline-environment-variables": "^6.8.0",
    "babel-plugin-transform-node-env-inline": "^6.8.0",
    "babel-plugin-transform-remove-console": "^6.8.0",
    "babel-plugin-transform-remove-debugger": "^6.8.0",
    "babel-plugin-transform-runtime": "^6.15.0",
    "babel-preset-babili": "^0.0.9",
    "babel-preset-env": "^0.0.9",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-react": "^6.16.0",
    "babel-preset-react-optimize": "^1.0.1",
    "babel-preset-stage-3": "^6.17.0",
    "babel-register": "^6.16.3",
    "babili": "^0.0.9",
    "babili-webpack-plugin": "^0.0.7",

[dmackerman]

We ran into this issue also when trying to create a HOC. It appears that if you do some simple assignment of the passed component the transpiler works properly. None of the settings in this issue have worked including passPerPreset: true.

It appears that babili can't determine if GridLayout has been used, although it's being used in the JSX directly below. Maybe it's a plugin order thing.

import React from 'react';
import sizeMe from 'react-sizeme';

const sizeMeHOC = sizeMe({
  monitorWidth: true,
  refreshRate: 16,
});

let GridLayoutComponent;

export default function dashboardWidthProvider(GridLayout) {
  GridLayoutComponent = GridLayout;
  const WrappedGridLayout = (props) => {
    return (
      <GridLayoutComponent
        {...props}
        width={props.size.width}
      />
    );
  };
  return sizeMeHOC(WrappedGridLayout);
}

[kangax]

Can confirm the issue. I'll look into 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}();"

[kangax]

(note that it only works if react preset is before babili)

[jonashartwig]

I tried doing that, but my comment from Nov 3rd points out a problem.

[boopathi]

Presets are evaluated in reverse order. ["es2015", "react", "babili"] - will run babili first, react second, and then es2015. Should add it in readme.

[kangax]

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