React-devtools: [3.4.3] Warning: unknown call: "relay:check"

[allmaxgit]

I have warning unknown call: "relay:check" in React native 0.57.5 after update react-devtools-core from 3.4.2 to 3.4.3.

Temp solution
Downgrade react-devtools-core to 3.4.2 in yarn.lock

react-devtools-core@^3.4.2:
  version "3.4.2"
  resolved "https://registry.yarnpkg.com/react-devtools-core/-/react-devtools-core-3.4.2.tgz#4888b428f1db9a3078fdff66a1da14f71fb1680e"
  integrity sha512-1pqbxenMeOiVPLf5Fm69woc+Q/pb/lLfWCizJuVJQDm9v7x0fcr76VMcq6Q30Onv3ikkfrlAQgOcOdCk/0t5tA==

[KalebPortillo]

downgrade it to 3.4.2 didn't work for me, still getting the warning

[dmitryame]

This solution didn't work for me either. Anybody, any resolution on this issue? It's really annoying.

[vovkasm]

Solution for me was simple (I described it here: https://github.com/facebook/react-native/issues/22116#issuecomment-440551681).

This warning was resolved after update global react-devtools package 3.4.2 -> 3.4.3, it was because inconsistent versions of global react-devtools and application react-devtools-core

[leoek]

You can disable the yellow box for this warning like this: YellowBox.ignoreWarnings(['unknown call: "relay:check"']);

This was the easiest temporary solution for me..

[bvaughn]

The Relay classic plug-in was removed from DevTools by @avijohnson in #1224.

The error sounds like there are incompatible versions of react-devtools and react-devtools-core packages installed– one of which that still has the old plug-in, and one of which that doesn't.

React Native 0.57.7 wants react-devtools-core@^3.4.2 which won't have the plug-in. (I believe 3.4.1 3.4.2 was the last version with it.)

I think you should be able to fix this error by updating react-devtools to 3.4.2+ 3.4.3+ as well, so they're in sync?

[bvaughn]

I'm going to close this issue since I'm pretty sure my comment above is the solution ^ but let's keep talking if there are questions or if I'm wrong. (We can re-open it if needed!)

[leoek]

@bvaughn Updating react-devtools seems to be the solution. I was using react-native-debugger 7.2.x with react-dev-tools 3.4.1... Unfortunately react-native-debugger 8.x does not work properly for me but that's a different issue.

[taschik]

I upgraded to [email protected] and react-devtools-core@^3.4.2 but still receive the warning on RN 0.57.7. any other idea what could cause it?

 React Native Environment Info:
    System:
      OS: macOS 10.14.1
      CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
      Memory: 3.79 GB / 32.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 10.10.0 - /usr/local/bin/node
      Yarn: 1.9.4 - /usr/local/bin/yarn
      npm: 6.4.1 - /usr/local/bin/npm
      Watchman: 4.9.0 - /usr/local/bin/watchman
    SDKs:
      iOS SDK:
        Platforms: iOS 12.1, macOS 10.14, tvOS 12.1, watchOS 5.1
      Android SDK:
        API Levels: 23, 26, 27, 28
        Build Tools: 23.0.1, 25.0.0, 26.0.3, 27.0.3, 28.0.1, 28.0.2, 28.0.3
        System Images: android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom
    IDEs:
      Android Studio: 3.2 AI-181.5540.7.32.5056338
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: ^16.6.1 => 16.6.1
      react-native: ^0.57.7 => 0.57.7
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-git-upgrade: 0.2.7

[Ashoat]

Try clearing your lockfile... you may still have an older version being used by a dependency.

[bvaughn]

@taschik No, that sounds unexpected. Can you confirm the version that you actually have installed (in node_modules)?

[taschik]

I removed the entire node_modules folder and reinstalled everything using npm install. my package-lock looks like this:

"react-devtools": {
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/react-devtools/-/react-devtools-3.4.3.tgz",
      "integrity": "sha512-LVinDD/pdm/WqmjJfyEc5ngv/JTcYaKCLSPeUZXwpjNpbI/w4ewuWklOLBuILOUlX1V9VYDaYRivz3j0DH2Lyw==",
      "requires": {
        "cross-spawn": "^5.0.1",
        "electron": "^1.8.7",
        "ip": "^1.1.4",
        "minimist": "^1.2.0",
        "react-devtools-core": "^3.4.3",
        "update-notifier": "^2.1.0"
      }
    },
    "react-devtools-core": {
      "version": "3.4.3",
      "resolved": "https://registry.npmjs.org/react-devtools-core/-/react-devtools-core-3.4.3.tgz",
      "integrity": "sha512-t3f6cRH5YSKv8qjRl1Z+1e0OwBZwJSdOAhJ9QAJdVKML7SmqAKKv3DxF+Ue03pE1N2UipPsLmaNcPzzMjIdZQg==",
      "requires": {
        "shell-quote": "^1.6.1",
        "ws": "^3.3.1"
      },
      "dependencies": {
        "ultron": {
          "version": "1.1.1",
          "resolved": "https://registry.npmjs.org/ultron/-/ultron-1.1.1.tgz",
          "integrity": "sha512-UIEXBNeYmKptWH6z8ZnqTeS8fV74zG0/eRU9VGkpzz+LIJNs8W/zM/L+7ctCkRrgbNnnR0xxw4bKOr0cW0N0Og=="
        },
        "ws": {
          "version": "3.3.3",
          "resolved": "https://registry.npmjs.org/ws/-/ws-3.3.3.tgz",
          "integrity": "sha512-nnWLa/NwZSt4KQJu51MYlCcSQ5g7INpOrOMt4XV8j4dqTXdmlUmSHQ8/oLC069ckre0fRsgfvsKwbTdtKLCDkA==",
          "requires": {
            "async-limiter": "~1.0.0",
            "safe-buffer": "~5.1.0",
            "ultron": "~1.1.0"
          }
        }
      }
    }

and still when building the app from scratch and restarting the metro bundler with flushed cache (npm start -- --reset-cache) I get

YellowBox.js:67 unknown call: "relay:check"

[bvaughn]

Hm 🤔 Any chance you can set a breakpoint to see what's making that call? I think something must still be installing 3.4.2.

You can see there's no mention of "relay:check" in 3.4.3, but there is in 3.4.2 backend and standalone.

(I was wrong about 3.4.1 being the last version with "relay:check" in it. Looks like 3.4.2 was.)

[taschik]

Interesting so the only reference of 3.4.2 that I found was in react-native's package-lock.json itself within the node_modules folder:

...
"react-devtools-core": "^3.4.2",
...

However in my projects package-lock file as well as by calling

npm list |grep react-devtools                                                                        1 ↵
npm ERR! peer dep missing: react@^16.6.3, required by [email protected]
├─┬ [email protected]
│ ├── [email protected] deduped
├─┬ [email protected]
│ ├── [email protected] deduped

I see I am absolutely on the latest version. I put in the call stack, hope that helps:

[vovkasm]

@taschik Can you recheck that you actually run react-devtools version 3.4.3? Can it be so that you run globally installed react-devtools? Can you try to run react-devtools from your local installation as <projectRoot>/node_modules/.bin/react-devtools (hope, that yarn places binaries at the same location as npm)?

[bvaughn]

I see I am absolutely on the latest version. I put in the call stack, hope that helps

Unfortunately the callstack doesn't tell me much. Those particular lines are the same between 3.4.2 and 3.4.3 for backend

[vovkasm]

It's react-devtools version <3.4.2 sends remotely packet that can't be handled by new react-devtools-core. So local callstack can't help.

[taschik]

@vovkasm I don't really get what you mean. How can I provide more context/information on how to fix it?

[vovkasm]

@taschik Sorry for my language.

I work most time with react-native and use react-devtools as standalone electron application, i.e. have it globally installed with npm as npm install -g react-devtools. Can you also try to use standalone version of [email protected] and at the same time disable any browser extensions that provide the same functional?

For more understanding whats happened, I try to extend description provided by @bvaughn here: https://github.com/facebook/react-devtools/issues/1233#issuecomment-444170293

_Note: Some parts are described approximately according to my current understandings of whats happened._

DevTools infrastructure include two main parts, one part "lives" in your application, I will refer to it as react-devtools-core. Second part is DevTools UI will be referred as DevTools. This part can be standalone electron application (package react-devtools) or browser plugin.

DevTools and react-devtools-core needs to communicate to pass information between.
They communicate through some remote channel (in case of standalone DevTools this channel is a websocket). Plugins such as removed "Relay classic" extends protocol of this communication with additional commands. In this concrete case DevTools sends to you application "relay:check" command. react-devtools-core receives this command, but since cannot process it, emits warning.

So to fix this, not only react-devtools-core needs to be updated, but also DevTools part - standalone react-devtools application or browser plugin.

[bvaughn]

@vovkasm That summary sounds right to me 😄

[taschik]

Thanks @vovkasm for the explanation. I am not using the electron application nor the debugger in the browser. I am using the React Native Debugger for debugging but there is no update available for it. anything I can do about it?

[bvaughn]

anything I can do about it?

I'm not familiar with that package, but I don't think so. Looks like it's been reported (jhen0409/react-native-debugger/issues/291) and a PR has been submitted (jhen0409/react-native-debugger/pull/295) so it seems like just a matter of waiting until the maintainer has a chance to release.