React-native: [0.54] Live Reload is broken on DeltaPatcher.js error

[fungilation]

Environment

Environment:
  OS: macOS Sierra 10.12.6
  Node: 9.7.1
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: Xcode 9.2 Build version 9C40b
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.3.0-alpha.1 => 16.3.0-alpha.1
  react-native: 0.54.0 => 0.54.0

Expected Behavior

In debug mode with Live Reload on, code changes should trigger reloading of my RN app.

Actual Behavior

Doesn't trigger code changes since RN 0.54, it did before. Instead, code change stall on Chrome console error:

DeltaPatcher.js:58 Uncaught (in promise) Error: DeltaPatcher should receive a fresh Delta when being initialized
    at DeltaPatcher.applyDelta (DeltaPatcher.js:58)
    at deltaUrlToBlobUrl (deltaUrlToBlobUrl.js:34)
    at <anonymous>

Steps to Reproduce

Any RN 0.54 app should reproduce this. For reference, these are dependencies in my app package.json:

  "dependencies": {
    "babel-plugin-idx": "^2",
    "he": "^1.1.0",
    "lodash": "^4.17.2",
    "moment": "^2.19.0",
    "moment-timezone": "^0.5.10",
    "node-summary": "../node-summary",
    "react": "^16.3.0-alpha.1",
    "react-native": "0.54.0",
    "react-native-blur": "^3.2.0",
    "react-native-code-push": "^5.2.1",
    "react-native-easy-toast": "^1.0.9",
    "react-native-firebase": "^3.0",
    "react-native-fit-image": "^1.4.8",
    "react-native-highlight-words": "^1.0.1",
    "react-native-keep-awake": "^3.0.1",
    "react-native-linear-gradient": "^2.0.0",
    "react-native-modalbox": "^1.3.8",
    "react-native-orientation": "^3.1.3",
    "react-native-parallax-scroll-view": "../react-native-parallax-scroll-view",
    "react-native-safari-view": "^2.0.0",
    "react-native-sentry": "^0.34",
    "react-native-sha256": "^1.1.1",
    "react-native-status-bar-size": "^0.3.2",
    "react-native-swiper": "^1.5.10",
    "react-native-tooltip": "^5.2.0",
    "react-native-tts": "../react-native-tts",
    "react-native-vector-icons": "^4.1.1",
    "react-native-webview-bridge": "../react-native-webview-bridge-RN0.51",
    "react-redux": "^5.0.1",
    "redux": "^3.6.0",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "redux-logger": "^3.0.6"
  }

[sydneywu]

Same issue. On every other refresh, this error message will appear. Using IOS simulator

[mjmasn]

Ditto but also without live reload, just pressing 'Reload' from the dev menu triggers the error about 70% of the time. Running Ubuntu 16.04, using a real device LG/Google Nexus 5X

Environment:
  OS: Linux 4.13
  Node: 8.9.4
  Yarn: 1.5.1
  npm: 5.6.0
  Watchman: Not Found
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.2.0 => 16.2.0
  react-native: ^0.54.0 => 0.54.0

EDIT: Even running react-native run-android again is giving the error unless I close the app each time :disappointed:

[Gguigre]

I got the same issue, hitting "Reload" several times seems to solve the problem (temporarly).
An other solution I found is to use React-Native-Debugger (https://github.com/jhen0409/react-native-debugger)

For an unknown reason, it seems to be working well

Good luck

[fungilation]

I've been meaning to try React-Native-Debugger, but that doesn't resolve this issue.

[ropaillet]

Broken for now.. does it happen with emulator ?

[Gguigre]

@fungilation yep, it's not a fix... Still, it solves the symptoms without curing the illness, better than nothing I suppose :/

@ropaillet Yep, I work with the IOS emulator and the problem is the same :/

)

[mgela]

+1

[fungilation]

Don't want to fork RN.

[iotriado]

Hi,
I face the same issue yesterday.
In my case the problem was that I was importing the same class twice:

import { ActivityIndicator, Dimensions, FlatList,ListView, ListItem ,Text, Image, View } from 'react-native';
import { List, ListItem } from "react-native-elements";

'ListItem' was imported twice.
By removing one instance , the problem solved.

[iotriado]

Actually I am wrong in my previous post , since this error is just blocking the 'real' backtrace to be shown.
Sorry for the inconvenience!!!
I follow the instructions above for remove the "throw" .
I have removed it from everywhere and the issue is not solved.
Do I have to rebuild smth?

[jqn]

Same problem here with RN 0.54.0 on MacOS

[c--m]

Same problem here with RN 0.54.0 on Windows

[wd]

I have downgrade to RN 0.52, I feel like 0.54 has lots of bugs, it's totally block our daily developing.

[fungilation]

For me with WonderSwipe, I'm not seeing blockers other than this and this. Not enough to bother downgrading from 0.54 for me (yet)

[preetness]

I guess I wasn't the only one with this issue...

[karlmosenbacher]

@preetness, nope, having the same issue as everybody else 👯‍♂️

[alainib]

following ( same issue on mac and android )

[yewenxiang23]

Same problem here

[yewenxiang23]

@Gguigre This has temporarily solved my problem.

[yewenxiang23]

@Gguigre Thank you very much

[Gguigre]

@yewenxiang23 you're welcome ! Hoping that the issue will be solved soon, using react native debugger is not really a solution...

Maybe someones has an idea about why "classic debugger" does crash and react native debugger doesn't . It is based on the official Remote Debugger so I don't really understand what is different between those 2 ways of debugging...

[erick2014]

Same error here
{
"name": "iosTestApp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"react": "^16.3.0-alpha.1",
"react-native": "0.54.0",
"react-native-background-timer": "^2.0.1",
"react-native-google-signin": "^0.12.0"
},
"devDependencies": {
"babel-jest": "22.4.1",
"babel-preset-react-native": "4.0.0",
"jest": "22.4.2",
"react-test-renderer": "^16.3.0-alpha.1"
},
"jest": {
"preset": "react-native"
}
}

I starts appearing when I do something like:

import BackgroundTimer from 'react-native-background-timer';

componentDidMount() {
    BackgroundTimer.start()
    this.interval = setInterval(() => {
      console.log('okay baby')
    }, 10000);
  }

  stopTimer = () => {
    clearInterval(this.interval);
    BackgroundTimer.stop()
  }

[fungilation]

Can we get some acknowledgement from someone in the know that this issue is being looked at please? Based on commit history, @rafeca @sophiebits @adamjernst @cpojer

[xaphod]

My CMD & R keys are rapidly wearing out, would love to see this fixed. Annoying.
But I love me some devs, thanks for all you do ❤️

[rafeca]

Sorry for the issue folks, this issue is fixed in metro v0.29.0

Seems that both RN 0.54 and 0.55 depend on metro v0.28.0, I think it should be safe to update them to use metro v0.29.0

In the meantim you can try forcing yarn to install metro v0.29.0 in your apps by using selective dependency resolutions.

[fungilation]

Added this to my package.json:

  "resolutions": {
    "react-native/metro": "^0.29.0"
  },

and ran yarn install. No go on react-native run-ios. In the Metro Bundler terminal:

Scanning folders for symlinks in <app>/node_modules (62ms)

Cannot read property 'length' of undefined

Process terminated. Press <enter> to close the window

[xaphod]

@rafeca Yeah I get the same as @fungilation

[rafeca]

ugh 😞 let me look into that

[rafeca]

Ok, there's good and bad news:

bad news: metro v0.29.0 won't work with RN 0.54-0.55 because it introduced a new config param that RN is not handling yet (we're working on improving configuration compatibility between RN and metro).

good news: the actual fix needed to solve this issue is in the RN repo (https://github.com/facebook/react-native/commit/7be3d1cbafa4434b05b8ae5b3ec2ba08a5edac9c), so cherry-picking it into the 0.54 and 0.55 branches and releasing a RN minor version will fix this. (cc @hramos, @grabbou ).

[c--m]

Applying this patch has solved the problem on my system. ❤️
RN 0.54.0, metro 0.28.0.
R key happy to have some rest

[waseemshahwan]

How do you apply the patch? @c--m
Did you just edit the rn module?

[henriquecomp]

Anyone can help how to apply the patch?

[coockoo]

@henriquecomp I did yarn add facebook/react-native in the project root. Still having the same error from time to time. So I don't know if this issue is not fixed in master (patch commit is merged in master as far as I can see) or it is not a real way to apply the patch.

[nimerfarahty]

Same problem

[c--m]

@crisppY and others you can just download and replace the two files in the commit provided by rafeca 7be3d1cbafa4434b05b8ae5b3ec2ba08a5edac9c in node_modules\react-native\local-cli\server\util\debugger-ui
I only tried it in my project with RN 0.54.0, metro 0.28.0

[EduardoFLima]

@crisppY and others you can just download and replace the two files in the commit provided by rafeca 7be3d1c in node_modules\react-native\local-cli\server\util\debugger-ui
I only tried it in my project with RN 0.54.0, metro 0.28.0

Worked for me ! Thank you !

[hramos]

If you're interested in seeing this fixed in 0.54, I've opened https://github.com/react-native-community/react-native-releases/issues/7. Version 0.55 has not been cut yet, so this fix should make it into the 0.55-RC soon.

[fungilation]

It should be cherry picked into 0.54, not 0.55.

[hramos]

I agree and that's what I have requested in the issue I linked to. 0.55 has not been cut yet, there is no release to cherry-pick into.

[henriquecomp]

@coockoo ok now it's working very well.
This bug was impacting firebase connection, when I was press R+R keys and the error was occurring, firebase database stops to do login and others command.

[fungilation]

RN 0.54.2 is out, which includes patch for fixing this. I haven't tested as I already downgraded RN back to 0.53.3 due to https://github.com/facebook/react-native/issues/18258

[grocco]

I upgraded to RN 0.54.2 but it did not fix it for me. It still randomly occurs

[fungilation]

https://github.com/facebook/react-native/commit/48f29a74c5499b07ebe1e6435a6f622968bc3779 is fail then? @rafeca

[rafeca]

@grocco @fungilation are you sure it does not fix the issue? I've upgraded my sample RN app to 0.54.2 and the error gets fixed for me.

[mjmasn]

@rafeca I think I've seen the error occasionally if I've left the Chrome tab open and then run a new instance of metro on a different git branch, but I guess that's expected. Otherwise all looks good :+1:

[stdavis]

Upgrading from 0.54.1 to 0.54.2 fixed the issue for me. Thanks for the great work!

[wqj97]

yarn clean cache&&yarn
Fixed my problem

[DylanVann]

This is fixed in 0.54.2.

[Noitidart]

I still get this, I am in 0.54.2 in all my brand new react-native init project.

[wqj97]

@Noitidart
I think u can try this

yarn add facbook/react-native

If it is not working, try this

yarn clean cache&&yarn

this fixed my problem

[Noitidart]

Thank you @wqj97! I'm not sure why it's still happening. I tried that. It's a fresh react-native init. It started off at 0.54.2 :(

[alainib]

i still go this error on mac

Uncaught (in promise) TypeError: window.deltaUrlToBlobUrl is not a function
    at getBlobUrl ((index):209)
    at WebSocket.ws.onmessage ((index):184)

with

    "react": "^16.2.0",
   "react-native": "^0.54.2",

The same config and code work on android, it work on IOs but i have to disable both livereload and debug

edit : i tryed

• removing package-lock
• npm cache clean --force
• npm install

[ishigamii]

Upgrade it to

"react": "16.3.0-alpha.1",
"react-native": "0.54.2",

And having this error in debug once every two reload (one time working next time error) :

Uncaught (in promise) Error: DeltaPatcher should receive a fresh Delta when being initialized
at DeltaPatcher.applyDelta (DeltaPatcher.js:58)
at deltaUrlToBlobUrl (deltaUrlToBlobUrl.js:34)

I verified and it does have the commit said to correct the problem 7be3d1c :)

[fungilation]

I confirm this is fixed in RN 0.54.3

[ishigamii]

Seems that after a npm cache clean --force and relaunching all the console the error disappeared for me.

[awakash]

Anyone know the best way to downgrade RN from 0.54.2 to 0.53.0?

[alainib]

awakash

npm uninstall react-native -S
npm install [email protected] -S

[fungilation]

No. I downgraded before, the easiest way: react-native-git-upgrade <version> (can be lower version)

There's no reason to downgrade now though. RN 0.54.3 is out and have fixed all glaring issues for me, including this one.

[awakash]

Got it, I'll give it a shot thanks @fungilation

[alexmbarton]

I managed to trigger this error in 0.54.2 and fixed it with:

watchman watch-del-all && yarn start --reset-cache

[christianlundberg]

I'm having the same problem as @ishigamii

"react": "16.3.0-alpha.1",
"react-native": "0.54.4",

[lannex]

Same issue. React 16.3.1, React Native 0.55.0

[franzmoro-vvoosh]

Tried rm -rf node_modules, watchman watch-del-all, yarn cache clean, yarn.
But only thing that seemed to consistently cause this error was enabling remoteJS debugging.

[jmeyers91]

Experiencing this issue. React Native 0.55.1, React 16.3.1.

[slegaitis]

Same issue RN 0.52.23 and React 16.1.0

[rafeca]

This issue should have been fixed in RN 0.55, can somebody that is experiencing the issue post the metro version that is being installed?

[prsn]

Hi @rafeca , I am facing this issue in RN 0.55.1 and metro version is 0.30.2.

[ljanssen5]

@rafeca I still am receiving this after updating to RN 0.55.2 today. metro version is 0.30.2

[dougmbarcellos]

Same problem... RN 0.55.1, metro 0.30.2

[paweljaneczek]

@rafeca same problem RN 0.55.2, metro 0.30.2

[rafeca]

Thanks folks! I've tried to reproduce the issue in my RN test repo (https://github.com/rafeca/rn-test-app/) but I haven't been able. Which steps are you following/which error are you getting?

[paweljaneczek]

@rafeca after yarn clean && rm -rf node_modules && yarn, killing packager, restarting google chrome it started to work flawlessly!

[rafeca]

Thanks for the info! I think reloading the remote debugger tab in google chrome should be enough

[dougmbarcellos]

@paweljaneczek, I'll try this later.

[dougmbarcellos]

I tried the solution pointed out by @paweljaneczek, but it did not work. I did the same process, started Chrome again and also restarted OS

[dougmbarcellos]

My problem was with the Chrome version. It was in version 56, I upgraded to 65 and everything went well.

[xstable]

I had the same Issue - even on react-native 0.55.2 and Metor 0.30.2.
I've removed all node_modules and install it again... once with yarn, once with npm. Same result.

I solved it now by manually remove the App from the Emulator (uninstall android-app via emulator-gui) and run the Packager again. Now it works.
Cost me several hours to figure out this. Hope this help someone too.

[iostate]

Environment

OS: macOS High Sierra 10.13.2
Node: 9.8.0
Yarn: 1.3.2
npm: 5.6.0
Watchman: 4.9.0
XCode: 9.2 build (9C40b)
Android Studio: 3.0.1

Dependencies

"dependencies": {
"aws-amplify": "^0.3.0",
"aws-amplify-react-native": "^0.2.9",
"expo": "^26.0.0",
"react": "16.3.0-alpha.1",
"react-native": "0.54.0",
"react-navigation": "^1.5.11"
}

I experienced the same error while running my Android emulator. I noticed after enabling the "Debug JS Remotely" option in the Android Emulator menu, that I began to receive the error about every other manual reload, just as others have mentioned.

Solution: Disable remote debugging through the same menu.

Access the Android developer menu by pressing CMD-M while in the Android Emulator on Mac. Picture below of the culprit, see Debug JS Remotely option.

[mjstelly]

@paweljaneczek fyi: yarn clean isn't a valid command. You may want to correct that in your post.

[mjstelly]

@rafeca in which rn version is this supposedly fixed? I'm still running 0.54.1. It is still present in this version.

[rafeca]

@mjstelly : this was fixed in v0.55.0

[mjstelly]

@rafeca thanks. I'm upgrading and testing it now. 👍

[pstanton]

@rafeca @hramos I'm getting this in RN 0.55.4 !!

    "react": "^16.3.1",
    "react-native": "^0.55.4",

DeltaPatcher.js:58 Uncaught (in promise) Error: DeltaPatcher should receive a fresh Delta when being initialized
    at DeltaPatcher.applyDelta (DeltaPatcher.js:58)
    at deltaUrlToBlobUrl (deltaUrlToBlobUrl.js:34)
applyDelta @ DeltaPatcher.js:58
deltaUrlToBlobUrl @ deltaUrlToBlobUrl.js:34
async function (async)
ws.onmessage @ (index):155

[mjmasn]

@rafeca @hramos Same as @pstanton although we're still on 0.55.2, usually after a git checkout branch / rebuild, but at least now it only happens once per branch change, not on every reload. Workaround is force-closing the app then tapping the icon again, or failing that close everything and build again. Killing metro / running watchman watch-del-all / closing the chrome tab / uninstalling the app first has no effect on this.

Environment:
  OS: Linux 4.13
  Node: 8.9.4
  Yarn: 1.6.0
  npm: 5.6.0
  Watchman: 4.9.0
  Xcode: N/A
  Android Studio: Not Found

Packages: (wanted => installed)
  react: ^16.3.0 => 16.3.1
  react-native: ^0.55.2 => 0.55.2

[hramos]

Catching up on notifications just now. Surprised to see this thread on a closed + fixed issue. In the future, please do go ahead and open a new issue - that provides a higher signal (to me, at least) versus comments on issues that I've tagged as Fixed.

[fungilation]

For this instance, can the Fixed flag be dropped on this issue? I don't see the issue myself personally (I'm on RN 0.54.4) but others are.

[pstanton]

@mjmasn FYI for me I just have to do another "refresh" .. this error occurs every 2nd refresh, ie after a successful one.

@hramos sorry I've had so many build issues this week i'm out of time! hopefully can just re-open this ticket?

[Noitidart]

I also have this issue intermittently on 0.55

[fungilation]

Speaking of regressions, of what's been fixed in 0.54.4 but came back in 0.55. Should I make a new issue on this too? https://github.com/facebook/react-native/issues/18258#issuecomment-380964628

[pstanton]

strangely, this has gone away but now "hot reloading" triggers but does nothing.

[ispadoto]

I'm seeing this error too...

"devDependencies": {
"babel-preset-react-native-stage-0": "^1.0.1",
"jest": "^22.4.3",
"jest-react-native": "^18.0.0",
"react-test-renderer": "16.3.1"
},
"scripts": {
"start": "react-native start",
"android": "react-native run-android",
"ios": "react-native run-ios",
"test": "jest"
},
"jest": {
"preset": "react-native"
},
"dependencies": {
"native-base": "^2.4.4",
"react": "16.3.1",
"react-native": "^0.55.4",
"react-native-navigation": "^1.1.458",
"react-native-vector-icons": "^4.6.0",
"react-redux": "^5.0.7",
"redux": "^4.0.0",
"remote-redux-devtools": "^0.5.12"
}

[marc-maurer]

Got the same problem...

    "react": "^16.3.0",
    "react-native": "0.54.0",

Edit: Got it working, I had to reload the debugging page in google chrome

[WilliamAnputra]

@TheNuclearCat wasted 15 minutes just to figure this out.

[Update 01 -July-2018 ] i got the same error again today, what i did was

1. yarn autoclean
2. rm -rf node_modules
3. yarn
4. restart packager & run react-native run-android

all good now.

"react": "^16.3.1",
"react-native": "^0.55.4",