Why does typescript complain about non-extensibility and readonly violation of dependency library?

Question

I use the event-source-polyfill library as dependency, version ^1.0.12. When the addEventListener method is called, I get the following error:

ERROR TypeError: Cannot add property message, object is not extensible
at EventSourcePolyfill.EventTarget.addEventListener (c:\git\my-project\node_modules\event-source-polyfill\src\eventsource.js:607:1)
at MapSubscriber.project (c:\git\my-project\src\app\notifications\store\notifications.effects.ts:56:44)
at MapSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\map.js:29:1)
at MapSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at WithLatestFromSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\withLatestFrom.js:57:1)
at WithLatestFromSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at FilterSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\filter.js:33:1)
at FilterSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at ScannedActionsSubject.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subject.js:39:1)
at SafeSubscriber._next (https://localhost:4200/my-project/vendor.js:148530:32)

I also get this error when EventSourcePolyfill.close() is called:

ERROR TypeError: Cannot assign to read only property 'readyState' of object '[object Object]'
at EventSourcePolyfill.close [as _close] (c:\git\my-project\node_modules\event-source-polyfill\src\eventsource.js:918:1)
at EventSourcePolyfill.close (c:\git\my-project\node_modules\event-source-polyfill\src\eventsource.js:996:1)
at SwitchMapSubscriber.project (c:\git\my-project\src\app\notifications\store\notifications.effects.ts:23:45)
at SwitchMapSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\switchMap.js:28:1)
at SwitchMapSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at WithLatestFromSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\withLatestFrom.js:57:1)
at WithLatestFromSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at FilterSubscriber._next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\operators\filter.js:33:1)
at FilterSubscriber.next (c:\git\my-project\node_modules\rxjs\_esm2015\internal\Subscriber.js:49:1)
at ScannedActionsSubject.next (https://localhost:4200/my-project/vendor.js:288904:25) {stack: 'TypeError: Cannot assign to read only propert…t:4200/my-project/vendor.js:288904:25)', message: 'Cannot assign to read only property 'readyState' of object '[object Object]''}

This library used to work with this very same version. This error occurs after some refactoring in the code (using NgRx library instead of angular services). Obviously, there must be something with my code change that makes this happen, I still cannot figure out what it is. One thing I suspect is that it seems as if it complained because it was handing EventSourcePolyfill as if it had the EventSource type from the lib.dom.d.ts of TypeScript because there the readyState field is read-only (but I really don't think that I connected the two anywhere!). But as the stack trace shows, the vanilla js library is called and in there I don't see where these variables are made read-only or non-extensible even after reading the source code.

Answer 1

It turned out that NgRx freezes its store. And after we submitted our EventSource object into the store of ngrx, it got deep frozen as object. And that is why it stopped functioning and could not update its own property at runtime after store submission. A possible solution might be ngrx-store-freeze though we have not tried it and I don't think that we are planning to do so.