After upgrading my Typescript compiler to version 1.8, I encountered an issue where modules defined in a definition file with a default export were showing as 'undefined' when imported.
Upon reverting back to 1.7.5, everything ran smoothly, indicating that the problem lies in the way the new modules are being exported. My compilation process involves webpack -> typescript ES6 Modules -> babel. A comparison of the output before and after the upgrade from babel revealed several differences, with the most noticeable being the absence of the interopRequireDefault function wrapping my import.
Definition file snippet (working fine):
// 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 }; }
// Main class definition
var m = new Main();
exports.default = m;
Output after updating only Typescript to 1.8.0:
function(module, exports, __webpack_require__) {
"strict mode";
// Class definitions
var ractive_1 = __webpack_require__(212);
var Main = function () {
function Main() {
// Constructor logic
}
// Class methods
var m = new Main();
exports.default = m;
};
Which results in the error:
ractive_1.default is not a function
The changes introduced by the newer Typescript version seem to have caused a significant difference in Babel's output.
Here is the original Typescript code snippet:
import Ractive from "ractive";
class Main {
private ractive: Ractive.Ractive;
private _rendered: boolean = false;
constructor() {
this.ractive = new Ractive({
// Initialization logic
});
}
}
let m = new Main();
export default m;
Any assistance in resolving this issue would be greatly appreciated. Thank you