Imports Removed By Compiler When Only Used In JSX Property

[julius-e]

TypeScript Version: 2.0.3

I'm migrating a React project from JS to TS. I have the compiler set to allow JS. The TS compiler is transpiling the TS, JS, and JSX to es5.

I've noticed that the TS compiler is dropping imports that are only used in JSX properties. It seems that the compiler doesn't notice the usage of the import and "optimizes" it away.

Also looked at: #4717

Code

import * as React from "react";
import { Comp } from 'components/Comp';
import * as store from '../../js/stores/store';  // <-- Is dropped in the compiled version of this file
class MyView extends React.Component {
  //...
  render() {
    return <div>
      // Other stuff...
      <Comp store={store} />  // Now when render() is run, this throws an exception since store is undefined
    </div>;
  }
}

I've found that this restores the import and fixes things, but it is suboptimal:

import * as React from "react";
import { Comp } from 'components/Comp';
import * as store from '../../js/stores/store';
class MyView extends React.Component {
  //...
  render() {
    let myStore = store;  // Use store in a "value position" in plain JS
    return <div>
      // Other stuff...
      <Comp store={store} />
    </div>;
  }
}

[yuit]

@julius-e I can't repo you example. Here is my setup. Let me know if I miss something

{
    "compilerOptions": {
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "jsx": "react",
        "allowJs": true,
        "outDir": "OutputJS"
    }
}

main.tsx

import * as React from "react";
import { Comp } from './components/Comp';
import * as store from './inputJS/store';  // <-- Is dropped in the compiled version of this file
class MyView extends React.Component<{},{}> {
  //...
  render() {
    return <div>
      // Other stuff...
      <Comp store={store} />  // Now when render() is run, this throws an exception since store is undefined
    </div>;
  }
}

components/Comp.tsx

export function Comp(prop1: {store: number}): JSX.Element {
    return undefined;
}

inputJS\store.js

"use strict";
export var store = 10;
module.exports = store;

output for main.tsx

"use strict";
var __extends = (this && this.__extends) || function (d, b) {
    for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p];
    function __() { this.constructor = d; }
    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
var React = require("react");
var Comp_1 = require('./components/Comp');
var store = require('./inputJS/store'); // <-- Is dropped in the compiled version of this file
var MyView = (function (_super) {
    __extends(MyView, _super);
    function MyView() {
        _super.apply(this, arguments);
    }
    //...
    MyView.prototype.render = function () {
        return React.createElement("div", null, 
            // Other stuff...
            "// Other stuff...", 
            React.createElement(Comp_1.Comp, {store: store}) // Now when render() is run, this throws an exception since store is undefined
             // Now when render() is run, this throws an exception since store is undefined
            , 
            "  // Now when render() is run, this throws an exception since store is undefined");
    };
    return MyView;
}(React.Component));

Let me know if I miss anything.

[julius-e]

I'm having trouble reproducing it on its own as well. The original code still produces the issue, but I cannot share that. This can be closed for now. If I can figure out how to repro, I will reopen.