Closed sdc395 closed 5 years ago
Could you provide a reproduce repo? Thanks
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?
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!
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. :-)
Thanks, I will look into it.
@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
?
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.
@sdc395, yes, you are right, the walk around is,
env.js
in the root.
if (typeof global !== 'undefined') {
global['__Zone_disable_XHR'] = true;
global['__Zone_disable_EventTarget'] = true;
}
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.
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.
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
@JiaLiPassion - it looks like Googlebot does not like Zone.js 0.9.0 either: https://github.com/angular/angular/issues/30203
@petebacondarwin, got it, I will check it, thanks!
I will close this one because https://github.com/angular/angular/issues/30203 has been fixed.
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 callingfetch
. The exception is thrown from thescheduleTask
function withinpatchXHR
ofzone.js
. Specifically, the call tooriAddListener.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.