Illegal invocation using patched XMLHttpRequest

[sdc395]

I've recently updated a React Native app that uses Zone.js to manager its database transactions and, in doing so, encountered an illegal invocation exception when calling fetch. The exception is thrown from the scheduleTask function within patchXHR of zone.js. Specifically, the call to oriAddListener.call(target, READY_STATE_CHANGE, newListener);

I've done my best to diagnose the problem but I can't see it.

I'm using Zone.js 0.9.0 with React Native 0.59 and debugging the application using Chrome 73.0.3683.86 (Official Build) (64-bit) on Ubuntu 16.04.6 4.15.0-46-generic x86_64.

[JiaLiPassion]

Could you provide a reproduce repo? Thanks

[sdc395]

Is that the most useful thing I can do? To reproduce it from code, you're going to need a JDK installation and an Android device or emulator to hand. If you have those things, it's enough to react-native init TestApp, npm i zone.js, import 'zone.js' in index.js and make a call to fetch.

In other news, FileReader is also broken. Am I doing something dumb? How should I import Zone.js in a React Native application?

[JiaLiPassion]

I never tried using zone.js in react native, and I don't think you did any thing wrong, the most possible reason is in react native, the webview has different implementation vs normal browser. So if you can provide a very basic repo to reproduce fetch and FileReader issue, so I don't need to begin to learn how to setup react native 101. Thanks!

[sdc395]

OK, I've created a repo at https://github.com/sdc395/react-native-zones.git.

I had no problems using Zone.js with React Native 0.56. The sooner Zones becomes a standard part of JavaScript the better. :-)

[JiaLiPassion]

Thanks, I will look into it.

[JiaLiPassion]

@sdc395, it seems react native implement it's own EventTarget and XMLHttpRequest, and it is inside Worker, so the patch become a little weird, so in your use case, you want to use zone to control XMLHttpRequest and FileReader?

[sdc395]

At the moment, I'm only knowingly using Zone.js to make database transaction objects available to asynchronous functions that need database access.

Perhaps I can disable the Zone.js patches I don't need. I had set __Zone_disable_XHR = true. Do I need to set __Zone_disable_EventTarget = true also? Could you clarify the steps?

Thanks for your help with this issue.

[JiaLiPassion]

@sdc395, yes, you are right, the walk around is,

1. create a env.js in the root.

if (typeof global !== 'undefined') {
  global['__Zone_disable_XHR'] = true;
  global['__Zone_disable_EventTarget'] = true;
}

2. in index.js, before import zone.js,

/**
 * @format
 */
import './env';
import 'zone.js';
import {AppRegistry} from 'react-native';
import App from './App';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => App);

And everything should work fine.

[sdc395]

That has done the trick, although I've only needed to disable EventTarget patching (so far). Thanks so much.

Will full, on-going support for React Native be available in the future? I'm building my mobile app's database access around Zone.js and I'd hate to have to rip that out post-launch.

[cobaltsis]

I have issue with version 0.9.0 too. I've recently updated all packages in project and Angular to version 7.2.13. Core-js is on version 3.0.1. After every request, zone.js throw this error: TypeError: Cannot read property 'call' of undefined at ZoneTask.scheduleTask [as scheduleFn].

Call of undefined is on this line: oriAddListener.call(target, READY_STATE_CHANGE, newListener);

We work with LG smart TV with webOS version 3.8.0 (latest LG update).

Here is stacktrace:
"TypeError: Cannot read property 'call' of undefined at ZoneTask.scheduleTask [as scheduleFn] (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:12611:27) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:9688:26) at Object.push../node_modules/zone.js/dist/zone.js.DELEGATE_ZS.onScheduleTask (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:9579:29) at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:9682:51) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:9516:43) at Zone.push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:9539:25) at scheduleMacroTaskWithCurrentZone (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:10472:25) at file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:12649:28 at proto.(anonymous function) [as send] (file:///media/developer/apps/usr/palm/applications/app/dist/polyfills.js:10796:24) at Observable._subscribe (file:///media/developer/apps/usr/palm/applications/app/dist/main.js:8049:17)"

After downgrading to zone.js version 0.8.29, application works

[petebacondarwin]

@JiaLiPassion - it looks like Googlebot does not like Zone.js 0.9.0 either: angular/angular#30203

[JiaLiPassion]

@petebacondarwin, got it, I will check it, thanks!

[JiaLiPassion]

I will close this one because angular/angular#30203 has been fixed.