angular-cli icon indicating copy to clipboard operation
angular-cli copied to clipboard

_defineProperty is not defined when building for production

Open anhallbe opened this issue 2 years ago • 2 comments

Which @angular/* package(s) are the source of the bug?

Don't known / other

Is this a regression?

No

Description

When compiling an Angular application with the ids-enterprise-wc library, there is an error (see details below).

This only happens when building an Angular app with the production configuration (not sure which config option exactly, but one of the default ones). It does not happen when running the default development configuration, and as far as I can tell this has never been an issue in non-Angular applications, which is why I believe this is an issue specifically with Angular (or some library in the build pipeline) rather than something specific to this library.

The code before ng build:

// node_modules/ids-enterprise-wc/chunks/ids-chunk-PKNHTUVH.js
// NOTE: Below is the minified (and formatted for readability) code
// Original source file is here: https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-modal/ids-modal-z-counter.ts

var t = class {
    zCounter;
    constructor() {
      this.zCounter = 1020;
    }
    increment() {
      return this.zCounter++;
    }
    decrement() {
      return this.zCounter--;
    }
  },
  e = new t(),
  n = e;
export { n as a };

The code after ng build or ng serve --configuration production:

// Minified code in main.js:1:1427140

ZM = new class {
    constructor() {
        _defineProperty(this, "zCounter", void 0),
        this.zCounter = 1020
    }
    increment() {
        return this.zCounter++
    }
    decrement() {
        return this.zCounter--
    }
}

The original TypeScript source: https://github.com/infor-design/enterprise-wc/blob/main/src/components/ids-modal/ids-modal-z-counter.ts

class IdsModalZCounter {
  zCounter: number;

  constructor() {
    this.zCounter = 1020;
  }

  increment() {
    return this.zCounter++;
  }

  decrement() {
    return this.zCounter--;
  }
}

const zCounter = new IdsModalZCounter();

export default zCounter;

Please provide a link to a minimal reproduction of the bug

https://github.com/anhallbe/repro-defineproperty

Please provide the exception or error you saw

Uncaught ReferenceError: _defineProperty is not defined
    at new <anonymous> (main.js:1:1427140)
    at 1251 (main.js:1:1427116)
    at r (runtime.js:1:128)
    at Tt (main.js:23:6333)
    at main.js:23:6354
    at n (runtime.js:1:2589)
    at main.js:1:83

Please provide the environment you discovered this bug in (run ng version)

Angular CLI: 15.2.8
Node: 18.16.0
Package Manager: npm 9.5.1
OS: darwin arm64

Angular: 15.2.9
... animations, common, compiler, compiler-cli, core, forms
... platform-browser, platform-browser-dynamic, router

Package                         Version
---------------------------------------------------------
@angular-devkit/architect       0.1502.8
@angular-devkit/build-angular   15.2.8
@angular-devkit/core            15.2.8
@angular-devkit/schematics      15.2.8
@angular/cli                    15.2.8
@schematics/angular             15.2.8
rxjs                            7.8.1
typescript                      4.9.5

Anything else?

The issue can be reproduced in an Angular 16 / Typescript 5.0 project.

anhallbe avatar May 15 '23 13:05 anhallbe

Update: So I tried setting the optimization builder option to false while leaving all the other options as-is. This solves the problem, as this is added to main.js:

/***/ 4942:
/*!*******************************************************************!*\
  !*** ./node_modules/@babel/runtime/helpers/esm/defineProperty.js ***!
  \*******************************************************************/
/***/ ((__unused_webpack___webpack_module__, __webpack_exports__, __webpack_require__) => {

"use strict";
__webpack_require__.r(__webpack_exports__);
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */   "default": () => (/* binding */ _defineProperty)
/* harmony export */ });
/* harmony import */ var _toPropertyKey_js__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./toPropertyKey.js */ 7343);

function _defineProperty(obj, key, value) {
  key = (0,_toPropertyKey_js__WEBPACK_IMPORTED_MODULE_0__["default"])(key);
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }
  return obj;
}

/***/ }),

...but this also doubles the bundle size so it's not really a solution...

anhallbe avatar May 15 '23 15:05 anhallbe

Have the same problem with js-toml library image

WiseBird avatar Feb 15 '24 15:02 WiseBird