fetch API doesn't resolve or reject #20405

john-hu · 2018-07-26T10:31:11Z

Review the documentation: https://facebook.github.io/react-native
Search for existing issues: https://github.com/facebook/react-native/issues
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

check out github repo: https://github.com/john-hu/react-native-fetch-no-resolve-reject
npm install
react-native run-android
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

The text was updated successfully, but these errors were encountered:

john-hu · 2018-07-26T10:35:26Z

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 · 2018-07-27T05:09:21Z

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 · 2018-07-27T06:52:57Z

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 · 2018-08-02T02:41:54Z

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 · 2018-08-02T08:23:25Z

@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 · 2018-08-03T01:00:31Z

@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 · 2018-08-03T01:36:08Z

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 · 2018-08-03T12:44:14Z

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 · 2018-08-03T14:06:13Z

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

paul-todd2 · 2018-08-05T11:19:38Z

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 · 2018-08-07T01:29:07Z

@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 · 2018-08-20T02:04:35Z

@john-hu could you find any solution?

john-hu · 2018-08-20T03:11:47Z

@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 · 2018-08-20T18:56:26Z

@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 · 2018-08-21T01:54:48Z

@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 · 2018-09-13T15:15:41Z

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 #21092, #21094 or #21098?

john-hu · 2018-09-14T00:25:56Z

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 · 2018-09-19T15:17:20Z

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 · 2018-09-26T13:39:52Z

@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 · 2018-09-28T13:22:32Z

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 · 2018-09-28T16:16:43Z

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

ZhengYuTay · 2018-10-12T08:21:17Z

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 · 2018-10-18T18:50:58Z

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 · 2018-10-18T23:21:26Z

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 · 2019-01-20T06:10:46Z

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.

kelset · 2019-03-22T11:51:41Z

Is this issue still happening in 0.59? 🤔

Tino-F · 2019-04-07T19:14:34Z

@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 · 2019-04-23T13:23:46Z

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 · 2019-04-29T09:48:11Z

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 · 2019-05-05T14:15:55Z

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 · 2019-05-09T10:55:10Z

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

Tino-F · 2019-05-09T11:21:50Z

@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 · 2019-05-09T12:20:14Z

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

Tino-F · 2019-05-09T14:55:23Z

@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 · 2019-07-23T19:02:30Z

@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 · 2019-07-25T15:31:57Z

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 · 2019-07-25T16:58:12Z

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

soumyamishra89 · 2019-07-26T08:56:25Z

@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 · 2019-07-26T09:21:18Z

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

soumyamishra89 · 2019-07-26T09:37:02Z

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

glebtv · 2019-10-08T21:25:54Z

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 · 2019-10-11T14:43:06Z

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 · 2020-01-09T15:31:20Z

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 · 2020-01-10T03:26:37Z

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 · 2020-04-09T10:01:26Z

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 · 2020-04-14T08:43:46Z

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.

react-native-bot added the 🌐Networking Related to a networking API. label Jul 26, 2018

john-hu closed this as completed Aug 3, 2018

john-hu reopened this Aug 3, 2018

msafayasar mentioned this issue Aug 19, 2018

Fetch takes so much time to start #20728

Closed

mikemorris mentioned this issue Sep 26, 2018

YellowBoxList Error when starting: TypeError: undefined is not an object (evaluating 'props.getItem') #21154

Closed

3 tasks

cpojer mentioned this issue Mar 19, 2019

RN Issue Triage Group 2 #24029

Closed

react-native-bot added the Bug label May 4, 2019

hramos removed the Type: Bug Report label May 6, 2019

robinvw1 mentioned this issue Oct 24, 2019

v7 plugin-proposal-class-properties transform flow type annotation to undefined babel/babel#8417

Closed

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 9, 2020

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Jan 10, 2020

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Apr 9, 2020

kelset closed this as completed Apr 14, 2020

facebook locked and limited conversation to collaborators Apr 14, 2020

fetch API doesn't resolve or reject #20405

fetch API doesn't resolve or reject #20405

Comments

john-hu commented Jul 26, 2018 • edited Loading

Environment

Description

Reproducible Demo

Expected Result

Actual Result

john-hu commented Jul 26, 2018 • edited Loading

xinhash commented Jul 27, 2018

john-hu commented Jul 27, 2018

ggtmtmgg commented Aug 2, 2018

Environment

john-hu commented Aug 2, 2018 • edited Loading

ggtmtmgg commented Aug 3, 2018

john-hu commented Aug 3, 2018

john-hu commented Aug 3, 2018

john-hu commented Aug 3, 2018

paul-todd2 commented Aug 5, 2018

john-hu commented Aug 7, 2018

msafayasar commented Aug 20, 2018

john-hu commented Aug 20, 2018

msafayasar commented Aug 20, 2018

john-hu commented Aug 21, 2018

mikemorris commented Sep 13, 2018 • edited Loading

john-hu commented Sep 14, 2018

john-hu commented Sep 19, 2018

john-hu commented Sep 26, 2018

alexisbronchart commented Sep 28, 2018 • edited Loading

john-hu commented Sep 28, 2018

ZhengYuTay commented Oct 12, 2018

raphaelgodro commented Oct 18, 2018

john-hu commented Oct 18, 2018

stale bot commented Jan 20, 2019

kelset commented Mar 22, 2019

Tino-F commented Apr 7, 2019 • edited Loading

fcaride commented Apr 23, 2019

kelset commented Apr 29, 2019

Tino-F commented May 5, 2019

NicolasSmit commented May 9, 2019

Tino-F commented May 9, 2019

NicolasSmit commented May 9, 2019

Tino-F commented May 9, 2019 • edited Loading

spsaucier commented Jul 23, 2019

soumyamishra89 commented Jul 25, 2019

spsaucier commented Jul 25, 2019

soumyamishra89 commented Jul 26, 2019 • edited Loading

john-hu commented Jul 26, 2019

soumyamishra89 commented Jul 26, 2019

glebtv commented Oct 8, 2019

EmpireJones commented Oct 11, 2019 • edited Loading

stale bot commented Jan 9, 2020

tqbdev commented Jan 10, 2020 • edited Loading

stale bot commented Apr 9, 2020

kelset commented Apr 14, 2020

john-hu commented Jul 26, 2018 •

edited

Loading

john-hu commented Jul 26, 2018 •

edited

Loading

john-hu commented Aug 2, 2018 •

edited

Loading

mikemorris commented Sep 13, 2018 •

edited

Loading

alexisbronchart commented Sep 28, 2018 •

edited

Loading

Tino-F commented Apr 7, 2019 •

edited

Loading

Tino-F commented May 9, 2019 •

edited

Loading

soumyamishra89 commented Jul 26, 2019 •

edited

Loading

EmpireJones commented Oct 11, 2019 •

edited

Loading

tqbdev commented Jan 10, 2020 •

edited

Loading