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:

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 19
  • Comments: 24 (5 by maintainers)

Most upvoted comments

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.

<script>
  window.TransformStream = null;
  window.WritableStream = null;
  window.ReadableStream = null;
</script>

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.

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.

<script>
  window.TransformStream = null;
  window.WritableStream = null;
  window.ReadableStream = null;
</script>

I am not sure of any issues this temporary fix may cause but it did get my application working again.

Using on Ionic Android app, i put the code at the start of my index, but now im getting this error:

Uncaught (in promise): TypeError: TransformStream is not a constructor TypeError: TransformStream is not a constructor

@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…

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.

<script>
  window.TransformStream = null;
  window.WritableStream = null;
  window.ReadableStream = null;
</script>

I am not sure of any issues this temporary fix may cause but it did get my application working again.

Using on Ionic Android app, i put the code at the start of my index, but now im getting this error:

Uncaught (in promise): TypeError: TransformStream is not a constructor TypeError: TransformStream is not a constructor