Imports removed by compiler when using object spread in jsx

[axelhzf]

TypeScript Version: 2.3.2

Code

Label.js

import React, { Component } from 'react';
export default class Label extends Component {
  render() {
    const { text } = this.props;
    return <div className="label">{text}</div>
  }
}

Button.js

import React, { Component } from 'react';
import Label from 'Label';

export default class Button extends Component {
  render() {
    const { label, ...rest } = this.props;
    return (
      <div {...rest}>
        <Label text={label} />
      </div>
    )
  }

Expected behavior:

The import Label from 'Label'; should be present in the output of the Button.js

Actual behavior:

The import Label from 'Label'; is being omited.

import React, { Component } from 'react';
var Button = (function (_super) {
    __extends(Button, _super);
    function Button() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Button.prototype.render = function () {
        var _a = this.props, label = _a.label, rest = __rest(_a, ["label"]);
        return (React.createElement("div", __assign({}, rest),
            React.createElement(Label, { text: label })));
    };
    return Button;
}(Component));
export default Button;

The problem is related with the object spread {...rest} . If I remove it the code works correctly.

I have created a repository with this code

https://github.com/axelhzf/ts-transpile-jsx-remove-import

[luggage66]

Reported in #15469 Were you as baffled as I? 🙂

[axelhzf]

Thanks, I did not see your issue before. Closing this issue.