Remote JS Debugging: Failed to Fetch

#1

I’m new to Expo and React Native. I’ve created a new project in XDE (Version 2.22.1) on Mac (High Sierra) and opened the Android Emulator (Nexus 6, Android 7.0 x86) from Android Studio. XDE packager is set to “Host > Tunnel” and “Development Mode”. I then click “Open on Android” and the bundle is built. Once it opens, I hit CMD-M and select “Remote JS Debugging”. Chrome (Version 63.0.3239.132 (Official Build) (64-bit)). In the console, I receive this error:

Failed to load http://packager.es-av8.myusername.react-temp.exp.direct/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=/Volumes/Storage/Apps/projects/react-temp/node_modules/expo/tools/hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19003' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
(index):188 Uncaught (in promise) TypeError: Failed to fetch
async function (async)
ws.onmessage @ (index):155
deltaUrlToBlobUrl.js:31 Fetch failed loading: GET "http://packager.es-av8.myusername.react-temp.exp.direct/node_modules/expo/AppEntry.delta?platform=android&dev=true&strict=false&minify=false&hot=false&assetPlugin=/Volumes/Storage/Apps/projects/react-temp/node_modules/expo/tools/hashAssetFiles".
deltaUrlToBlobUrl @ deltaUrlToBlobUrl.js:31
getBlobUrl @ (index):209
ws.onmessage @ (index):184

Please let me know how I can get Remote Debugging to work in Chrome. Any help would be greatly appreciated.

2 Likes
#2

try disabling hot reloading, let me know if that helps

#3

Thank you for your prompt reply. Unfortunately, nothing changed. I have both Live Reload and Hot Reloading disabled.

I don’t know if this helps but when I have Remote JS Debugging enabled, the app never seems to load. When I disable it, I see “Open up App.js to start working on your app!”

#4

thanks for letting me know. i will investigate, until then you can continue using it without remote js debugging or only use remote js debugging through a simulator

1 Like
#5

Thank you, @notbrent. Please let me know if you need anything else from me to help investigate.

#6

I saw this for the first time today, as well. The app froze at “Downloading 100%” and I got this error in the Chrome devtools console. I’m running my app from the iOS Simulator. It is only happening on a new app I created this morning from exp init (“blank” template), and isn’t happening from my existing app.

#7

Really pleased to see I’m not alone in getting this error. I’m just starting to learn this stuff and naturally presume that it’s something stupid that I’m doing that creates it. Thankfully it seems that this time, that’s not the case.

#8

Same issue here:

Failed to load http://10.10.8.61:19001/node_modules/react-native-scripts/build/bin/crna-entry.delta?platform=android&dev=true&minify=false&hot=false&assetPlugin=C:\Development\inside-track\inside-track-mobile-app\node_modules\expo\tools\hashAssetFiles: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:19001' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

and

(index):188 Uncaught (in promise) TypeError: Failed to fetch
async function (async)
ws.onmessage @ (index):155

Showing up in DevTools - app screen is just blank if I have remote debugging enabled.

1 Like
#9

@dalefrench this is a CORS issue. Chrome automatically prevents Cross Origin Resource Sharing. the only fix for this that i’ve found was this chrome extension called “Allow-Control-Allow-Origin”.

Sadly, usage of this extension seems to break some things that come from normal browsing, so you will have to switch it on and off as you switch from browsing to developing.

This tends to only happen on physical devices, if it does happen in a simulator, you should just be able to clean the project and restart the sim without closing the debugger tab.

If someone finds a better solution around CORS. That would be immensely helpful for those of us that prefer testing with hardware :blush:

3 Likes
#10

I tried it previously, but found that it, for some reason, changed axios.get() and .post() to OPTIONS when received by servers. I also received two errors in console:

Refused to set unsafe header "connection"
Refused to set unsafe header "proxy-connection"

As @saulgarza stated, it’s isn’t an optimal solution. Debugging in Firefox produces the same errors as Chrome, so it’s not specific to a browser.

#11

hi all, this is an issue that occurred upstream with react native and the fix will ship in the next SDK. Sorry for the inconvenience!

1 Like
#12

According to @ide on a StackOverflow thread:

A fix for this issue will be included with React Native 0.53 and Expo SDK 26. As a workaround in SDK 25, you can use the LAN IP or localhost (w/simulator) options instead of the “tunnel” option in exp/XDE. Configuring your environment to work without the tunnel is faster too: https://docs.expo.io/versions/latest/guides/debugging.html#to-ensure-the-best-debugging-experience-first-change-your-host-type-in-xde-to-lan-or-localhost-if-you-use-tunnel-with-debugging-enabled-you-are-likely-to-experience-so-much-latency-that-your-app-is-unusable-while-here-also-ensure-that-development-mode-is-checked

2 Likes
closed #13

This topic was automatically closed 20 days after the last reply. New replies are no longer allowed.