awesome-typescript-loader does not work well with babel's preset-env's useBuiltIns

[zerkms]

A repository with reproduction: https://github.com/zerkms/awesome-typescript-loader-usebuiltins

Explanation:

This is what emitted when I use @babel/preset-env option "useBuiltIns": "usage" and try to use runtime objects from newer JS standards (most of the output is omitted for readability):

source file:

const p = new Promise(() => {});

export default p;

generated output

// ... few hundred lines skipped
/***/ "./src/index.ts":
/*!**********************!*\
  !*** ./src/index.ts ***!
  \**********************/
/*! no exports provided */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es6.promise */ "./node_modules/core-js/modules/es6.promise.js");
/* harmony import */ var core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0__);

Object.defineProperty(exports, "__esModule", {
  value: true
});
var p = new Promise(function () {});
exports.default = p;

/***/ }),

As you may see awesome-typescript-loader expects the exporting object to be named exports, while babel (or its preset-env plugin) has changed it to __webpack_exports__

As expected - this code would fail with undefined reference exports.

While that's what is emitted if used just js

// ... few hundred lines skipped
/***/ "./src/index.js":
/*!**********************!*\
  !*** ./src/index.js ***!
  \**********************/
/*! exports provided: default */
/***/ (function(module, __webpack_exports__, __webpack_require__) {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony import */ var core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! core-js/modules/es6.promise */ "./node_modules/core-js/modules/es6.promise.js");
/* harmony import */ var core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(core_js_modules_es6_promise__WEBPACK_IMPORTED_MODULE_0__);

var p = new Promise(function () {});
/* harmony default export */ __webpack_exports__["default"] = (p);

/***/ }),

After thinking for a moment, I'm not sure anymore if it's the awesome-typescript-loader or typescript's issue.

[zerkms]

Ok, after more research it looks like it has nothing to do with the awesome-typescript-loader but it's typescript that emits such code: https://www.typescriptlang.org/play/#src=const%20p%20%3D%20new%20Promise(()%20%3D%3E%20%7B%7D)%3B%0D%0A%0D%0Aexport%20default%20p%3B%0D%0A

const p = new Promise(() => {});

export default p;

->

define(["require", "exports"], function (require, exports) {
    "use strict";
    Object.defineProperty(exports, "__esModule", { value: true });
    var p = new Promise(function () { });
    exports.default = p;
});

Please close this issue if that's the case.