Babel no longer applying _interopRequireDefault with Typescript 1.8

Question

I just upgraded my Typescript compiler to the new 1.8 version, and am now having an issue where modules I define in a definition file with a default export are 'undefined' when I try and import them.

I reverted back to 1.7.5 and everything works fine, so it has to be something with the way the new modules are exported. I use webpack -> typescript ES6 Modules -> babel to compile. I compared the output before and after the upgrade from babel, and there are quite a few differences in the output, but most notable is the lack of interopRequireDefault function wrapping my import.

From the definition file (works):

// used for require()
declare module "ractive" {
    const ractive: Ractive.Static;
    export {ractive as default};
}

Output from Typescript 1.7.5 -> Babel:

function(module, exports, __webpack_require__) {

"use strict";

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

Object.defineProperty(exports, "__esModule", {
    value: true
});

var _ractive = __webpack_require__(212);

var _ractive2 = _interopRequireDefault(_ractive);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var __awaiter = undefined && undefined.__awaiter || function (thisArg, _arguments, Promise, generator) {
    return new Promise(function (resolve, reject) {
        generator = generator.call(thisArg, _arguments);
        function cast(value) {
            return value instanceof Promise && value.constructor === Promise ? value : new Promise(function (resolve) {
                resolve(value);
            });
        }
        function onfulfill(value) {
            try {
                step("next", value);
            } catch (e) {
                reject(e);
            }
        }
        function onreject(value) {
            try {
                step("throw", value);
            } catch (e) {
                reject(e);
            }
        }
        function step(verb, value) {
            var result = generator[verb](value);
            result.done ? resolve(result.value) : cast(result.value).then(onfulfill, onreject);
        }
        step("next", void 0);
    });
};

var Main = function () {
    function Main() {
        _classCallCheck(this, Main);

        this._rendered = false;
        this.ractive = new _ractive2.default({
            el: null,
            append: true,
            template: __webpack_require__(213),
            transitions: {
                fade: __webpack_require__(214)
            }
        });
    }

    _createClass(Main, [{
        key: "enable",
        value: function enable() {
            if (this._rendered) {
                return;
            }
            this._rendered = true;
            return this.ractive.render("body");
        }
    }, {
        key: "disable",
        value: function disable() {
            if (!this._rendered) {
                return;
            }
            this._rendered = false;
            return this.ractive.unrender();
        }
    }, {
        key: "rendered",
        get: function get() {
            return this._rendered;
        }
    }]);

    return Main;
}();

var m = new Main();
exports.default = m;

Output after only updating Typescript to 1.8.0

function(module, exports, __webpack_require__) {

    "use strict";

    var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

    function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

    var ractive_1 = __webpack_require__(212);

    var Main = function () {
        function Main() {
            _classCallCheck(this, Main);

            this._rendered = false;
            this.ractive = new ractive_1.default({
                el: null,
                append: true,
                template: __webpack_require__(213),
                transitions: {
                    fade: __webpack_require__(214)
                }
            });
        }

        _createClass(Main, [{
            key: "enable",
            value: function enable() {
                if (this._rendered) {
                    return;
                }
                this._rendered = true;
                return this.ractive.render("body");
            }
        }, {
            key: "disable",
            value: function disable() {
                if (!this._rendered) {
                    return;
                }
                this._rendered = false;
                return this.ractive.unrender();
            }
        }, {
            key: "rendered",
            get: function get() {
                return this._rendered;
            }
        }]);

        return Main;
    }();

    var m = new Main();
    exports.default = m;

Which gives the error

ractive_1.default is not a function

I'm not sure what about the newer Typescript version is causing the drastic change in output from Babel.

Here is the original Typescript

import Ractive from "ractive";

class Main {

    private ractive: Ractive.Ractive;

    private _rendered: boolean = false;

    constructor() {
        this.ractive = new Ractive({
            el: null,
            append: true,
            template: require("./main.mustache"),
            transitions: {
                fade: require<Ractive.TransitionPlugin>("ractive-transitions-fade")
            }
        });
    }

    public get rendered() {
        return this._rendered;
    }

    public enable() {
        if (this._rendered) {
            return;
        }
        this._rendered = true;
        return this.ractive.render("body");
    }

    public  disable() {
        if (!this._rendered) {
            return;
        }

        this._rendered = false;
        return this.ractive.unrender();
    }
}

let m = new Main();

export default m;

Any help is appreciated. Thanks

Answer 1

I fixed it, it turns out my ts-loader was out of date for webpack, and was causing issues. Updating to 0.8.1 solved it.