React-native: fetch API doesn't resolve or reject

[john-hu]

• [x] Review the documentation: https://facebook.github.io/react-native
• [x] Search for existing issues: https://github.com/facebook/react-native/issues
• [x] Use the latest React Native release: https://github.com/facebook/react-native/releases

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-3540M CPU @ 3.00GHz
Memory: 226.52 MB / 8.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 8.9.0 - /usr/local/bin/node
Yarn: 1.2.1 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 23.0.2, 25.0.0, 25.0.2, 26.0.3, 27.0.3, 28.0.1
API Levels: 14, 15, 16, 17, 18, 19, 20, 22, 23, 25, 26, 8
IDEs:
Android Studio: 3.1 AI-173.4819257
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-create-library: 3.1.2
react-native-git-upgrade: 0.2.7

Description

Using the example of networking doc to fetch movie.json from facebook server doesn't work.

I had traced the code to dispatchEvent which doesn't trigger load event. The reason is [email protected] cannot find any 'load' event listeners.

Reproducible Demo

1. check out github repo: https://github.com/john-hu/react-native-fetch-no-resolve-reject
2. npm install
3. react-native run-android
4. open debugger ui to see console

Expected Result

see the following console.log

before fetch
fetch sent
{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977"},
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985"},
    { "id": "3", "title": "The Matrix", "releaseYear": "1999"},
    { "id": "4", "title": "Inception", "releaseYear": "2010"},
    { "id": "5", "title": "Interstellar", "releaseYear": "2014"}
  ]
}
[Array]

Actual Result

before fetch
fetch sent

[john-hu]

BTW, I am trying to upgrade my another react-native project from 0.49.3 to latest version. The code works well at 0.49.3 but not good at 0.56.0.

I verify it on my real device moto g5s plus.

[xinhash]

Happens same on my codebase. I upgraded from 0.55 to 0.56 and fetch calls aren't getting completed. However on enabling network inspect in debugger, the fetch calls are resolved/rejected normally.

[john-hu]

According to the code of event-target-shim, it should work if we use XHR.addEventListener('load', func). But it is not tested on my site.

[ggtmtmgg]

In my environment, it works in both of Android and iOS.
I used https://github.com/john-hu/react-native-fetch-no-resolve-reject.

Android logs:

iOS logs:

Environment

React Native Environment Info:
System:
OS: macOS High Sierra 10.13.6
CPU: x64 Intel(R) Core(TM) i7-5557U CPU @ 3.10GHz
Memory: 30.20 MB / 8.00 GB
Shell: 5.3.1 - /usr/local/bin/zsh
Binaries:
Node: 8.2.1 - /usr/local/var/nodenv/versions/8.2.1/bin/node
Yarn: 1.6.0 - /usr/local/bin/yarn
npm: 5.5.1 - /usr/local/var/nodenv/versions/8.2.1/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
SDKs:
iOS SDK:
Platforms: iOS 11.4, macOS 10.13, tvOS 11.4, watchOS 4.3
Android SDK:
Build Tools: 23.0.1, 25.0.2, 25.0.3, 26.0.1, 27.0.3
API Levels: 23, 24, 25, 26, 27, 28
IDEs:
Android Studio: 2.3 AI-162.3934792
Xcode: 9.4.1/9F2000 - /usr/bin/xcodebuild
npmPackages:
react: 16.4.1 => 16.4.1
react-native: ^0.56.0 => 0.56.0
npmGlobalPackages:
create-react-native-app: 1.0.0
react-native-cli: 2.0.1
react-native-git-upgrade: 0.2.7

[john-hu]

@ggtmtmgg would you mind to tell me which event-target-shim version you use?? You can simply type npm list | grep event-target-shim to find it....

The root cause is it doesn't try to call onload when it dispatches load event. It only finds event listeners from events hooked with addEventListener.

BTW, I will try to reinstall again to see if this issue still there.

[ggtmtmgg]

@john-hu
I used yarn for installing node modules, cause I didn't notice that there is already package-lock.json.

$ yarn list | grep event-target-shim
├─ [email protected]
│  ├─ event-target-shim@^1.0.5
$ yarn list | grep -B 30 event-target-shim
├─ [email protected]
├─ [email protected]
│  └─ is-arrayish@^0.2.1
├─ [email protected]
│  ├─ accepts@~1.3.3
│  └─ escape-html@~1.0.3
├─ [email protected]
│  ├─ es-to-primitive@^1.1.1
│  ├─ function-bind@^1.1.1
│  ├─ has@^1.0.1
│  ├─ is-callable@^1.1.3
│  └─ is-regex@^1.0.4
├─ [email protected]
│  ├─ is-callable@^1.1.1
│  ├─ is-date-object@^1.0.1
│  └─ is-symbol@^1.0.1
├─ [email protected]
├─ [email protected]
├─ [email protected]
│  ├─ esprima@^3.1.3
│  ├─ [email protected]
│  ├─ estraverse@^4.2.0
│  ├─ esutils@^2.0.2
│  ├─ optionator@^0.8.1
│  ├─ source-map@~0.6.1
│  └─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
├─ [email protected]
--
├─ [email protected]
│  ├─ absolute-path@^0.0.0
│  ├─ [email protected]
│  ├─ art@^0.10.0
│  ├─ base64-js@^1.1.2
│  ├─ chalk@^1.1.1
│  ├─ [email protected]
│  │  ├─ ansi-styles@^2.2.1
│  │  ├─ escape-string-regexp@^1.0.2
│  │  ├─ has-ansi@^2.0.0
│  │  ├─ strip-ansi@^3.0.0
│  │  └─ supports-color@^2.0.0
│  ├─ [email protected]
│  │  ├─ string-width@^1.0.1
│  │  ├─ [email protected]
│  │  │  ├─ code-point-at@^1.0.0
│  │  │  ├─ is-fullwidth-code-point@^1.0.0
│  │  │  └─ strip-ansi@^3.0.0
│  │  ├─ strip-ansi@^3.0.1
│  │  └─ wrap-ansi@^2.0.0
│  ├─ commander@^2.9.0
│  ├─ compression@^1.7.1
│  ├─ connect@^3.6.5
│  ├─ [email protected]
│  ├─ create-react-class@^15.6.3
│  ├─ debug@^2.2.0
│  ├─ denodeify@^1.2.1
│  ├─ envinfo@^5.7.0
│  ├─ errorhandler@^1.5.0
│  ├─ escape-string-regexp@^1.0.5
│  ├─ event-target-shim@^1.0.5

[john-hu]

Well. I only have one version of event-target-shim:

➜  react-native-fetch-no-resolve-reject git:(master) ✗ npm list | grep event-target-shim
│ ├── [email protected]

and

➜  react-native-fetch-no-resolve-reject git:(master) ✗ npm list | grep -B 30 event-target-shim
│ │ ├─┬ [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├─┬ [email protected]
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected] deduped
│ │ │ ├── [email protected]
│ │ │ └── [email protected]
│ │ ├── [email protected]
│ │ └── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ ├── [email protected] deduped
│ │ └── [email protected] deduped
│ ├─┬ [email protected]
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]
│ ├─┬ [email protected]
│ │ ├── [email protected] deduped
│ │ └── [email protected]
│ ├── [email protected]
│ ├── [email protected]

I will try to make manual change to the react-native folder inside of my node_modules to test if 1.0.5 affects the result.

Thank you @ggtmtmgg !! This is a good finding.... I would like to keep my app up-to-date with all dependencies.

[john-hu]

Strange. The same issue cannot be reproduced today. I had re-installed with npm install today. And it works correctly....... I will close this issue since we cannot reproduce it.

[john-hu]

Reopen this issue because it comes to me when I use it with the release build.

[paul-todd2]

Could this be related to the version of iOS you are running? there were changes to the networking stack to strengthen the network calls. See https://ste.vn/2015/06/10/configuring-app-transport-security-ios-9-osx-10-11/

In at least one external site, even though they were correctly using HTTPS I had to disable Perfect Forward Secrecy otherwise I was seeing similar behaviour.

[john-hu]

@paul-todd2 Thanks for the information. Actually, I use Android smart phone to test it. I found it happens randomly. For some unknown cases, I can reproduce it 100%....

[msafayasar]

@john-hu could you find any solution?

[john-hu]

@msafayasar
No, I didn't.... The current status of my project is that I can get the fetch resolved at debug build and cannot resovle at release build. Will waiting for next release to check it.

[msafayasar]

@john-hu
In your situation does it resolve maybe after 60 seconds? Or does it never resolve?

I am very obsessed with this problem. I optimized every bit of my server side code because I thought it was because of server but it wasn't. I am very close to publish my app but cannot publish in this condition. I hope someone give proper solution to this

[john-hu]

@msafayasar I never noticed that it is resolved after 60s+ or is never resolved. I just noticed that the speed doesn't make sense. The URL I use is a RSS feed which is hosted at cloudflare. The speed should be fast.

My current workaround is to use old version of react native. Old version is so stable. You should also give old version a try if you don't use any new features from 0.56.

[mikemorris]

I'm seeing this behavior since upgrading from v0.53.0 to v0.57.0, _on both iOS and Android_, where calls to fetch will never resolve. The requests are definitely sent and able to reach a local server, but responses seem to just be lost.

I tried pinning [email protected], but that didn't resolve this issue.

Maybe related to https://github.com/facebook/react-native/issues/21092, https://github.com/facebook/react-native/issues/21094 or https://github.com/facebook/react-native/issues/21098?

[john-hu]

I tried 0.57.0 today. The debug build can fetch data correctly. But I cannot create release build for my android device. So, it's not clear if I can reproduce this within my app.

[john-hu]

I made a release build of my app. The issue still exists at my app's release build after migrated to 0.57.0.

[john-hu]

@msafayasar
I got a workaround which worked at the debug and release mode. I gave up to fetch. I use the XMLHttpRequest. According to my previous finding, event-target-shim cannot dispatchEvent through onload. But it can dispatchEvent through addEventListener.

Today, I come back to this issue and try to find a workaround. I use the following code which resolves or rejects correctly:

export const fetchText = (url) => {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.addEventListener('readystatechange', (e) => {
            if (xhr.readyState !== 4) {
                return;
            }
            if (xhr.status === 200) {
                resolve(xhr.responseText);
            } else {
                reject(e);
            }
        });
        xhr.open('GET', url);
        xhr.send();
    });
};

Please give it a try.

[alexisbronchart]

I also had this issue. Apparently @babel/plugin-proposal-class-properties has a bug and since I didn't really need it, I just removed it from my babelrc.

[john-hu]

@alexisbronchart Thanks for this information. I can confirm that this issue is gone after the @babel/plugin-proposal-class-properties removed.

[ZhengYuTay]

Still having this problem with or without @babel/plugin-proposal-class-properties. Current, rn version 0.57.1. Seems to be a bug with fetch.

[raphaelgodro]

I have this issue as well with react-native 0.56.0.
Can you guys stop closing issue for no reason? This is a real issue!
Have this problem with or without @babel/plugin-proposal-class-properties

[john-hu]

Would you mind to test if you have #21154 with/without babel class properties?

BTW, I think the workaround is still work if you have the issue. Please try it.

In my case, I have both of these issues. After removed, everything goes well.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

[JPeer264]

This issue is really weird. I tried to debug it, but it is really hard to find a device where it happens. The strange part: it happens just on production builds and just on some devices. I didn't find a specific pattern yet, but we had issues just on the newest OS versions.

On previous rn versions we had the problem with iPhone 6 + X (iOS 12). Now we have this problem with Samsung Galaxy S8 (Android 8).

Fun fact. As I said it works on the development builds. So, as soon as we run the development builds on such devices it then suddenly works in production as well. This is the only way I found how to "fix" this kinda problem.

I will definitely try now the XMLHttpRequest @john-hu suggested. Also @john-hu can you maybe try to check if my "Fun fact" also applies to you?

[john-hu]

@JPeer264 Where is the Fun fact repo? I would like to try it. Actually, I stopped my small RN app development because of a lot of 3rd parties libs issues. I am considering to give up RN and go back to native app.

[JPeer264]

Actually I meant to try it in your own repo. My repo is unfortunately private.

Just as a note: Maybe you should give expo a try, which is is an immense timesaver.

[john-hu]

@JPeer264 Got you. I saw similar Fun fact while filing this bug. But after I removed the @babel/plugin-proposal-class-properties, it is gone.

[JPeer264]

I always thought we are not using the class properties plugin. But we are using the preset babel-preset-expo which is using the metro-react-native-babel-preset under the hood. So as of this we are also using this plugin. I will try to remove this plugin somehow. Thanks for the hint.

[kelset]

Is this issue still happening in 0.59? 🤔

[Tino-F]

@kelset I'm having this issue using 0.59.1. It works fine in debug mode, but isn't working when I build the release APK

[fcaride]

I had exact the same problem. The reason was that i had a space hidden in the url. In the debugger worked with that space but without the debugger no

[kelset]

Can any of you folks kindly provide a repro with the latest 0.59? (Or wait for 0.60? Should come out later this week)

[Tino-F]

I found out that my issue was the SSL. My API wasn't using SSL (which isn't allowed in production mode apparently). After I added SSL, I was able to make requests and get responses. I had to add the cert, private key, and chain file before it started working for me.

[NicolasSmit]

@Tino-F
Can you please provide the details of your solution ?

[Tino-F]

@NicolasSmit the URL that I was "fetching" was using HTTP instead of HTTPS

so instead of

http://example.com

I used

https://example.com/

[NicolasSmit]

@Tino-F
I got this ;)
But how did you add the cert, private key & chain file ?

[Tino-F]

@NicolasSmit it's done on the server that you're fetching to and it depends on what kind of server you're using whether it's a Node, Apache, Nginx, etc. so the instructions will vary for each. I used let's encrypt to generate the cert, private key & chain file.

You can check out their article on how to get started setting up ssl here: https://letsencrypt.org/getting-started/

[spsaucier]

@john-hu The XMLHttpRequest workaround works for me too. Unfortunately, as the babel plugin is part of module:metro-react-native-babel-preset, it's not particularly practical to remove it at this point. I'm very surprised more people haven't run into this issue.

[soumyamishra89]

My ios app does not resolve all fetch calls. I updated to RN 0.60.4 and the issue has worsened. @babel/plugin-proposal-class-properties is not part of babelrc file. The fetch call gets stuck and i wait for it to timeout after which it starts working again. Is there any workaround for it?

[spsaucier]

@soumyamishra89 Is it in your yarn/package.lock file anywhere?

[soumyamishra89]

@spsaucier yes its in my package.lock file. Does it affect because of it?
The issue happens on ios only. Android works fine

[john-hu]

It affects your project if you can find it at your package.lock or yarn.lock files.

[soumyamishra89]

metro-react-native-babel-preset requires this package. How should i remove it without affecting the packages that requires it?

[glebtv]

Just had this exact issue during react-native upgrade from 0.60.5 to 0.61.2
Running on physical device (oneplus 5t) from linux (arch).
For me, a full PC reboot resolved it (no device reboot) with react-native-debugger running.

[EmpireJones]

This issue didn't seem to relate to usage of plugin-proposal-class-properties, for me. I resolved this issue by clearing the cache via the packager - react-native start -- --reset-cache or npm run start --reset-cache.

I was previously only clearing the cache via react-native run-android -- --reset-cache and deleting the node_modules folder, but there seems to be new and innovative places to hide cached files in the $TMPDIR folder ($TMPDIR/react-native-packager-cache-*, $TMPDIR/metro-bundler-cache-*, $TMPDIR/haste-map-react-native-packager-*).

*TMPDIR being /tmp/ or wherever temporary storage is configured for your OS.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[tqbdev]

I face the same problem. When the app on production, some users download from App Store and can't fetch any API. This is serious problem.

[stale[bot]]

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as a "Discussion" or add it to the "Backlog" and I will leave it open. Thank you for your contributions.

[kelset]

This issue had really low interaction in 2020, so I'm going to close and lock this. If you have the issue still, please open a new issue with a good repro with 0.62 so that it can be investigated.