Missing Imports using TSX, ellipsis and transpileOnly (ts-loader)

[olmobrutall]

Hi Roslyn Team,

This is a follow-up of this issue: TypeStrong/ts-loader#538

I'm responsible for a set of Framework / Applications that use TS and React intensively and trying to update to TS 2.3.

We're using webpack, ts-loader and the option transpileOnly that makes the initial compilation much faster (40s -> 150s). transpileOnly will call transpileModule.

Using this transpileOnly, in combination with ellipsis in TSX elements makes TS to forget importing some references.

Github Repository that reproduces the problem in isolation

https://github.com/olmobrutall/tsxError

TS Source

import * as React from 'react'
import { classes } from './Utils'

export interface Typeahead2Props {
    spanAttrs?: React.HTMLAttributes<HTMLSpanElement>;
}

export default class Typeahead2 extends React.Component<Typeahead2Props, {}>
{
    render() {

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

JS Full compilation (Right)

Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(35);
var Utils_1 = __webpack_require__(36);
var Typeahead2 = (function (_super) {
    __extends(Typeahead2, _super);
    function Typeahead2() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Typeahead2.prototype.render = function () {
        return (React.createElement("span", __assign({}, this.props.spanAttrs, { className: Utils_1.classes(this.props.spanAttrs && this.props.spanAttrs.className, "sf-typeahead") })));
    };
    return Typeahead2;
}(React.Component));
exports.default = Typeahead2;

JS Transpilation (Wrong)

Object.defineProperty(exports, "__esModule", { value: true });
var React = __webpack_require__(35);
var Typeahead2 = (function (_super) {
    __extends(Typeahead2, _super);
    function Typeahead2() {
        return _super !== null && _super.apply(this, arguments) || this;
    }
    Typeahead2.prototype.render = function () {
        return (React.createElement("span", __assign({}, this.props.spanAttrs, { className: Utils_1.classes(this.props.spanAttrs && this.props.spanAttrs.className, "sf-typeahead") })));
    };
    return Typeahead2;
}(React.Component));
exports.default = Typeahead2;

Note the missing Utils_1

Thanks for the nice work :)

[jquintozamora]

Hi @olmobrutall ,
Similar issue happened to me on #15721.

Temporary I used this workaround:
Import with require and different variable name "cardType":

const cardType = require("../ViewerItem/ViewerItemCardType");

Use it using this variable name:
cardType.ViewerItemCardType.Big

Isn't ideal, but worked temporary, let's see if it's provided a quick fix for that, which seems important.

Maybe in your scenario would be like:

Import:
const utils = require("./Utils");

Usage:

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

[olmobrutall]

Hi @jquintozamora

Thanks for your detailed answer, indeed looks like the same problem.

Are you also using TS-loader with transpileOnly?

I've found workarounds but then i found another bug...

The issue can also happen with imported symbols inside of the JSX element with ellipsis, not in properties.

It's a set of big applications and is failing at runtime so I'll prefer a proper solution.

Let's see if the sun arrives to Seattle and we get some attention :)

[jquintozamora]

Hi @olmobrutall , Actually I am using ts-loader, but not transpileOnly.

[olmobrutall]

Strage, removing transpileOnly fixed the problem in my case...

[mhegazy]

Looks like a duplicate of #15469. should be fixed in typescript@next and in the next TS 2.3.3 release next week.

can you give typescript@next a try and see if you are still running into issues?

[olmobrutall]

Looks like works 👍