Missin imports in TS 2.3 / JSX

[olmobrutall]

Hi guys,

I have a problem updating to TS 2.3 and using JSX: looks like some imports are removed.

I've been spending some time to track it down and looks like it's a ts-loader problem, because running tsc with noEmit: false generates the right files, but ts-loader removes some imports.

AFAIK, looks like the imports are removed when they are relative file paths and/or only used in JSX expressions.

TS Source code in Github:

(Problematic file in Submodule)
https://github.com/signumsoftware/framework/blob/bb6965f60fbebca1ecb4ecf4277bf38275965d99/Signum.React/Scripts/Lines/Typeahead.tsx

(Application with webpack.config)
https://github.com/signumsoftware/southwind/tree/master/Southwind.React

TS Source code simplification

import * as React from 'react'
import { classes, Dic } from '../Globals'

export default class Typeahead extends React.Component<TypeaheadProps, TypeaheadState>
{
      render() {

        return (
            <span {...this.props.spanAttrs} className={classes(this.props.spanAttrs && this.props.spanAttrs.className, "sf-typeahead")}>
         </span>);
    }
}

Note: Imports and uses classes

Generated js using tsc only

Object.defineProperty(exports, "__esModule", { value: true });
var React = require("react");
var Globals_1 = require("../Globals");
var Typeahead = (function (_super) {
    __extends(Typeahead, _super);
    function Typeahead(props) {

    Typeahead.prototype.render = function () {
        var _this = this;
        return (React.createElement("span", __assign({}, this.props.spanAttrs, { className: Globals_1.classes(this.props.spanAttrs && this.props.spanAttrs.className, "sf-typeahead") })));
    };

    return Typeahead;
}(React.Component));

Note: Correctly globals into Globals_1 and uses Globals_1.classes

Generated Webpack using ts-loader

var React = __webpack_require__(1);
var Typeahead = (function (_super) {
    __extends(Typeahead, _super);
    function Typeahead(props) {

    Typeahead.prototype.render = function () {
        var _this = this;
        return (React.createElement("span", __assign({}, this.props.spanAttrs, { className: Globals_1.classes(this.props.spanAttrs && this.props.spanAttrs.className, "sf-typeahead") }),
      ));
    };

    return Typeahead;
}(React.Component));

Note: Uses Globals_1.classes but **removes import of Globals_1 **

Is TS 2.3 already supported, or are there any plans to do it?

Thanks for your great work.

[johnnyreilly]

Hi @olmobrutall,

Thanks for the detailed issue. I haven't had any issues using 2.3 myself and as far as I know things should just work. I don't know why your setup is experiencing this - it might be work comparing that with one of the ts-loader examples and seeing if they face the same issue.

[olmobrutall]

I've isolated in my solution and only happens on JSX elements that have ellipsis ({...}) and then the refereed property.

I've been trying to reproduce it in webpack2-gulp-react-flux-babel-karma but I did not have luck. The ecosystem is very different however. I'm not using Babel or Gulp.

Is there any ways ts-loader could show some intermediate state to debug it easily?

[johnnyreilly]

Probably the easiest thing to do is build a copy of ts-loader yourself and thread in console.log statements as and where you need them. I've had good results with that in the past.

[olmobrutall]

Problem found, checking the code and adding some console.log I was able to isolate the problem.

It's a Typescript problem that happens only when transpileOnly: true,

That's why it didn't happen in your examples or when I was compiling without ts-loader.

I'll raise an issue in Typescript now,

Thanks for your help 👍

[johnnyreilly]

Happy to help!

[olmobrutall]

This thing is fixed now in 2.3.4, feel free to close.

Thanks for the help