angular: Promise.prototype.then called on incompatible receiver in Chrome 77.0.3865.90
🐞 bug report
Affected Package
The issue is caused by package zone.js
Maybe.
Is this a regression?
Actually angular is not broken, but a browser update broke the frameworks behavior.
It’s still working in all other browsers except Chrome 77.0.3865.90
Description
In Chrome 77.0.3865.90 in some case the following error is thrown for Promises around ReadableStream, WritableStream or TransformStream, but I couldn’t come up with a simple reproduction.
It was working fine until the most recent Chrome patch.
TypeError: Method Promise.prototype.then called on incompatible receiver [object Object]
at ZoneAwarePromise.then (<anonymous>)
🔬 Minimal Reproduction
https://github.com/zaenk/chrome77-zonejs-promise-bug
Prereq: node 10 or 12, npm 3.11+, ng cli 8.3.5
- Clone the repo
- npm install
- ng serve
- Open localhost:4200 in an updated Chrome Stable channel (77.0.3865.90)
- F12 for console, observe the error message
- If it not breaks for the first time, give the dev server and the browser some restart
🔥 Exception or Error
TypeError: Method Promise.prototype.then called on incompatible receiver [object Object]
at ZoneAwarePromise.then (<anonymous>)
🌍 Your Environment
Angular Version:
Package Version
-----------------------------------------------------------
@angular-devkit/architect 0.803.5
@angular-devkit/build-angular 0.803.5
@angular-devkit/build-optimizer 0.803.5
@angular-devkit/build-webpack 0.803.5
@angular-devkit/core 8.3.5
@angular-devkit/schematics 8.3.5
@angular/cli 8.3.5
@ngtools/webpack 8.3.5
@schematics/angular 8.3.5
@schematics/update 0.803.5
rxjs 6.4.0
typescript 3.5.3
webpack 4.39.2
Anything else relevant?
Browser version
Code that throwing this error is working in:
- Chrome 76
- Chrome 78 (Beta)
- Chrome 79 (Canary)
- Firefox 68
- Firefox 69
- Edge 18
- Edge 78 (Dev)
- Also might have worked in 77.0.3865.75, but I cannot tell this for sure
Other
- webpack package was not installed at top level node_modules with npm 6.8.x, installing 6.11.3 of npm fixed that
Edit:
- Here’s a fiddle with the working code without angular https://jsfiddle.net/by15stqh/4/
- I tried to debug this for hours, every place where this library uses
await
it returns a Promise, which always have thethen
override from zone. Every object being wrapped is a Promise https://github.com/angular/angular/blob/2e84f4e0cda5ee4d1c9dae0c5789c7225d7c94e5/packages/zone.js/lib/common/promise.ts#L474-L478 - Tried NgZone
runOutsideAngular
but the global promise is still modified by zone, so the result is the same - Tried with zone.js 0.9.1 and 0.10.2, no difference
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 19
- Comments: 24 (5 by maintainers)
As a temporary workaround you can set TransformStream, ReadableStream, and Writable stream to null so they are set by polyfills. They need to be set before your app is loaded.
I am not sure of any issues this temporary fix may cause but it did get my application working again.
I have confirmed with Chrome team, this issue will be fixed from Chrome side in chrome 78, so I will test it and close this issue after chrome 78 stable is out. The issue can be traced here. https://bugs.chromium.org/p/chromium/issues/detail?id=1008376
@sertal70 With no workaround present, works in 76/78/79 and errors in 77. With workaround present, works in 76/77/78/79.
@SlyverGR I encounter the exact same problem (Ionic 3 app using openpgp.js, which is where the issue occurs in my case). I had to specifically add a polyfill for the web streams right after I nullified the browser ones: after the “null setting” code, just add:
<script src="https://unpkg.com/web-streams-polyfill/dist/polyfill.min.js"></script>
You should be ok now…Using on Ionic Android app, i put the code at the start of my index, but now im getting this error: