"Uncaught TypeError: Object.setPrototypeOf called on null or undefined" after upgrading Angular project

Question

I have an Angular application, which works perfectly. However, after upgrading the dependencies using yarn upgrade, I'm getting this cryptic error:

main.bundle.js:6779 Uncaught TypeError: Object.setPrototypeOf called on null or undefined
    at setPrototypeOf (<anonymous>)
    at webpackJsonp.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts.__extends (main.bundle.js:6779)
    at phone-number-input.component.ts:24
    at Object.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts (phone-number-input.component.ts:69)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.module.ts (phone-number-input.component.ts:24)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/ui-components/src/ui-components.module.ts (roman-numeral.pipe.ts:10)
    at __webpack_require__ (bootstrap 8652e46ce92ee05aa5a3:54)
    at Object.../../../../../src/app/app.module.ts (app.component.ts:31)
webpackJsonp.../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts.__extends @ main.bundle.js:6779
(anonymous) @ phone-number-input.component.ts:24
../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.component.ts @ phone-number-input.component.ts:69
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/ui-components/src/components/phone-number-input/phone-number-input.module.ts @ phone-number-input.component.ts:24
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/ui-components/src/ui-components.module.ts @ roman-numeral.pipe.ts:10
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/app/app.module.ts @ app.component.ts:31
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
../../../../../src/main.ts @ environment.ts:10
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
2 @ ui-components.module.ts:108
__webpack_require__ @ bootstrap 8652e46ce92ee05aa5a3:54
webpackJsonpCallback @ bootstrap 8652e46ce92ee05aa5a3:25
(anonymous) @ main.bundle.js:1

When following the specified files and line numbers I can not find any issues. The IDE shows no problems and compilation happens without errors.

When trying to comment-out the components, mentioned in the error, it just starts to mention another components.

What could be causing this and how do I debug/investigate this cryptic error?

Answer 1

Without any meaningful error messages and with stack trace telling me almost nothing. I've decided to investigate what was actually triggering this problem. Considering it appeared after dependency upgrade, I've pulled up the diff for yarn.lock and started to revert some parts of it and recompiling the application along the way checking if it will make the error go away. After some tedious work I found out that it was caused by TypeScript being updated from 2.3.4 to 2.4.0.

So the next step would be to study the changelog and to analyze what could have broken in my code.

So, in the end I would recommend to upgrade your dependencies more often (this will help to reduce upgrade size in case you will need to investigate it).

I hope it would help someone. Cheers!

Update

• After further investigation I've found out the exact case when this error is happening, so I've posted an issue to Angular GitHub repository.

• And finally, here's the actual culprit issue in TypeScript.