React-native: react-devtools 3.5.0 breaks new project

[sunnylqm]

reactDevTools.connectToDevTools is not a function

## Environment
  React Native Environment Info:
    System:
      OS: macOS High Sierra 10.13.6
      CPU: (8) x64 Intel(R) Core(TM) i7-4870HQ CPU @ 2.50GHz
      Memory: 833.36 MB / 16.00 GB
      Shell: 5.3 - /bin/zsh
    Binaries:
      Node: 8.15.0 - /usr/local/bin/node
      Yarn: 1.12.3 - /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: 22, 23, 24, 25, 26, 27, 28
        Build Tools: 23.0.1, 23.0.2, 23.0.3, 24.0.1, 25.0.0, 25.0.2, 25.0.3, 26.0.1, 26.0.2, 26.0.3, 27.0.3, 28.0.2
        System Images: android-25 | Google APIs Intel x86 Atom, android-27 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom, android-28 | Google APIs Intel x86 Atom_64
    IDEs:
      Android Studio: 3.1 AI-173.4907809
      Xcode: 10.1/10B61 - /usr/bin/xcodebuild
    npmPackages:
      react: 16.6.3 => 16.6.3
      react-native: 0.57.8 => 0.57.8
    npmGlobalPackages:
      react-native-cli: 2.0.1
      react-native-create-library: 3.1.2
      react-native-debugger-open: 0.3.17
      react-native-git-upgrade: 0.2.7
      react-native-update-cli: 0.1.0

Description

Reproducible Demo

Just init a new project and you'll hit this issue

Workaround

Put the following in your package.json and run yarn (not npm, which does not support "resolutions") to force install the previous version:

  "resolutions": {
    "react-devtools-core": "3.4.3"
  }

Then close the current packager window, run yarn start --reset-cache.

Since the compiled js file changed a lot and we actually got an empty object in setupDevtools.js, so I suspect that something went wrong with build configuration, maybe related to https://github.com/facebook/react-devtools/commit/28d36a228de7ff8d72665f3c6a1b8f11ad7e94b6

cc @bvaughn @kelset @hramos

[Flatheadman]

same problem.

[ESXHandsome]

same problem.

[swushi]

Same issue on two different computers. Workaround without yarn on Windows?

[silencer07]

resolution did not work for me strangely enough, what i did is install this particular version as dev-dependency for the mean time

[trops]

still not working with the workarounds

[jamonholmgren]

Thanks for reporting! (Please don't comment with "same here" comments; just thumbs-up the issue and subscribe to updates if you want.)

[osamaqarem]

Same issue.
I decided to learn React Native today, and I struggled for ~3 hours thinking I did something wrong during the "Get Started" guide. I was about to open a new issue to get help... only to find this opened 2 hours ago. Quite the headache 😫

[ppv94]

i am also getting the same error what should i do resolve this error
i have tried this but i am getting same error
"resolutions": {
"react-devtools-core": "3.4.3"
}
what should i do to resolve this issue

[prav02]

I am facing same problems, but when I am trying to run the previous projects that I have created, they all run fine.

[MingFaiYau]

After i upgrade react native 0.54.x -> 0.57.8, i got this problem too.

In setupDevtools.js

const reactDevTools = require('react-devtools-core');
reactDevTools return is an Object, not a function , so get error...
So it may be the react-devtools-core/build/backend.js problem..

For my temp solution..
add checking before use reactDevTools or just remove this code..

    if (typeof reactDevTools === 'function') {
      reactDevTools.connectToDevTools({
        isAppActive,
        host,
        // Read the optional global variable for backward compatibility.
        // It was added in https://github.com/facebook/react-native/commit/bf2b435322e89d0aeee8792b1c6e04656c2719a0.
        port: window.__REACT_DEVTOOLS_PORT__,
        resolveRNStyle: require('flattenStyle'),
      });
    }

[jamonholmgren]

I would recommend rolling back to [email protected]. I was able to do this and it worked.

yarn add --dev [email protected]
or
npm install --save-dev [email protected]

I will note that this happened on a brand-new 0.57.7 project also.

[ghost]

God bless you

[chuckntaylor]

Same issues here. Reverting to [email protected] as @jamonholmgren recommended got me back up and running. Thanks!

[minhphung210]

the solution not work for me. I use version 0.57.8

[ppv94]

done npm install --save-dev [email protected],
in android its working but in ios simulator its showing the same error.

how to resolve this error

[svjkumar]

In android I just disabled JS Dev Mode in Dev settings then error disappears. This is temporary solution only.

[akira-murata]

@jamonholmgren

yarn add --dev [email protected]

It worked on both android iOS
Thank you

[SilajitBukaiSil]

@svjkumar how to disabled JS Dev Mode in Dev settings? can you please help me. I am new in react native.

[jordenchang55]

Shake your device and then you'll see the develop menu, the last one is Dev settings. BTW, I tried in [email protected], but not work

[SilajitBukaiSil]

@jamonholmgren the solution is not worked for me

[jordenchang55]

@minhphung210 Thanks. After 3 hours of struggle, finally I can see welcome text on the screen.

[timesina]

This solution does not work for 0.57.8 versions

[ppv94]

@ppv94. @MingFaiYau solution is worked , you can try its

its working in android but its not working in ios for me.

[jordenchang55]

@timesina You need to install the dependency in the devDependecies, i.e., use npm install with --save-dev argument.

[SilajitBukaiSil]

Shake your device and then you'll see the develop menu, the last one is Dev settings. BTW, I tried in [email protected], but not work

Thanks @jordenchang55 . Its working for me in [email protected]. Just run your project once again.

[seuzxh]

Same issue.

But I use react-devtools-core@3.4.2 not 3.4.3 to make it work.
My react-native version is 0.57.7
Here is my package.json file"

{
  "name": "MyApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.1",
    "react-native": "0.57.7"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.50.0",
    "react-devtools-core": "^3.4.2",
    "react-test-renderer": "16.6.1"
  },
  "jest": {
    "preset": "react-native"
  }
}

[NguyenPhatBG]

Same issue, but version 0.57.8 not work for me :(
https://github.com/facebook/react-native/issues/22865

[nvmanh]

confirmed ios/android works with rn 0.57.8 and react-devtools-core 3.4.2 ( 3.4.3 not work)

{ "name": "TicketScanner", "version": "0.0.1", "private": true, "scripts": { "start": "node node_modules/react-native/local-cli/cli.js start", "test": "jest", "ios": "react-native run-ios", "android": "react-native run-android" }, "dependencies": { "react": "16.6.3", "react-native": "0.57.8", "react-native-gesture-handler": "^1.0.12", "react-navigation": "^3.0.9" }, "devDependencies": { "babel-jest": "23.6.0", "eslint-config-rallycoding": "^3.2.0", "jest": "23.6.0", "metro-react-native-babel-preset": "0.51.1", "react-devtools-core": "3.4.2", "react-test-renderer": "16.6.3" }, "jest": { "preset": "react-native" }, "resolutions": { "react-devtools-core": "3.4.2" } }

[ozanmanav]

Same here. It has blocked us a lot. :\

[inkweon7269]

Me too.

[satisum]

@nvmanh

thanks,it works

npm install --save-dev [email protected]

[bkitduy]

It works with v0.57.8. Thanks

[zhima]

done npm install --save-dev [email protected],
in android its working but in ios simulator its showing the same error.

how to resolve this error

I am using 0.57.8, and I encounter the same issue.
I also fix the issue with @jamonholmgren 's command npm install --save-dev [email protected]

At first, it works in android, while iOS still show the error.
Then I run these two command to clean the cache, and react-native run-ios again, and it works.
npm cache clean --force
react-native start --reset-cache

[NguyenPhatBG]

Thanks @nvmanh, @zhima, It's work for me now 💃 💃 💃

[priyesh321]

it doesn't work for me

[arkhan13]

not working the heck
npm install --save-dev [email protected] isn't working

[NguyenPhatBG]

@priyesh321 => @nvmanh and @zhima
You need to delete node_module folder, after that yarn or npm install
Check package.json file, if you not seen react-devtools-core: '3.4.2'
do this: npm install --save-dev [email protected]

[ppv94]

done npm install --save-dev [email protected],
in android its working but in ios simulator its showing the same error.

how to resolve this error

I am using 0.57.8, and I encounter the same issue.
I also fix the issue with @jamonholmgren 's command npm install --save-dev [email protected]

At first, it works in android, while iOS still show the error.
Then I run these two command to clean the cache, and react-native run-ios again, and it works.
npm cache clean --force
react-native start --reset-cache

thanks it works for me in android and ios also.

[arkhan13]

there is one solution to this Within your app in the Android Emulator press Command + M on OSX or Ctrl + M on Linux and Windows.

then go to dev settings

uncheck JD DEV MODE

The first option worked for me

[priyesh321]

@priyesh321 => @nvmanh and @zhima
You need to delete node_module folder, after that yarn or npm install
Check package.json file, if you not seen react-devtools-core: '3.4.2'
do this: npm install --save-dev [email protected]

thanks its works for me

[SamuelVEshapogu]

@sunnylqm thanks
I'm using 0.56, below workaround solved the issue.
"resolutions": {
"react-devtools-core": "3.4.3"
}

[AygnYldz]

npm install --save-dev [email protected]

it works.

[kulbhushan-ucreate]

For yarn developer 👍
I'm using 0.57.8, below workaround solved the issue.

"resolutions": {
"react-devtools-core": "3.4.3"
},
add this piece of code and after that delete yarn.lock file and run command:
rm -rf node_modules && yarn install
and its working.

Thanks.

[arkhan13]

to get rid of this in the first place I decided to create a downgraded react-native version which is 0.55
to do so
run this
react-native init newproject --version [email protected]
0.55 is the version I chose

[SMJ93]

We are still getting the issue after downgrading react-devtools-core to 3.4.3 and 3.4.2

Our environment:

• react-native: 0.57.2
• node: 10.5.0
• npm: 6.4.1
• iOS 12.1

Also tried setting react-devtools to 3.4.3 too.

We can't downgrade our react-native version to 0.55 as @arkhan13 as suggested above.

[joerneu]

Even after downgrading in "devDependencies" I could still find newer versions of "react-devtools-core" in other modules.

I solved it with yarn by downgrading and changing the version of "react-devtools-core" in all dependent modules:

  "devDependencies": {
    ...
    "react-devtools-core": "3.4.3",
    ...
  },
  "resolutions": {
    "**/react-devtools-core": "3.4.3"
  },

Important: The glob-pattern in "resolutions"!

After deleting the "node_modules" folder and the "yarn.lock" file and running yarn install, the Android app is running without issues.

(with react-native 0.57.8)

[Kouznetsov]

Does anyone have an idea of what exactly is going wrong here ?
Why is this error appearing now ? Did something change with the RN repo ? I didn't upgrade anything but the issue appeared anyway. As the npm package cannot (they cannot, right ?) change without a version incrementation, I wonder how I came to have this error.

• If anyone would know the exact reason of the issue (a RN contributor perhaps), it would certainly help.

[sunnylqm]

@Kouznetsov The reason I already described in title, that is, caused by the new version of react-devtools-core. A project will contain thousands of third-party libraries, which is why we often saw things break like a curse though we do nothing wrong.

And 1) the npm package can update silently every time you install unless it is locked to a specified version. 2) Even you lock your dependencies, do not forget your dependencies can also have their dependencies which may not have locked versions. And that is exactly what is going wrong right here right now. (react-devtools-core is a dependency of react-native but was updated with a break build since its version not locked)

[saachitech]

Tried all solutions from this thread but I am still having issue with ios. Attached is my package.json.

{
  "name": "MyAwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "react": "16.6.3",
    "react-native": "0.57.8",
    "react-native-gesture-handler": "^1.0.12",
    "react-navigation": "^3.0.9"
  },
  "devDependencies": {
    "babel-jest": "23.6.0",
    "eslint-config-rallycoding": "^3.2.0",
    "jest": "23.6.0",
    "metro-react-native-babel-preset": "0.51.1",
    "react-devtools-core": "3.4.2",
    "react-test-renderer": "16.6.3"
  },
  "jest": {
    "preset": "react-native"
  },
  "resolutions": {
    "**/react-devtools-core": "3.4.2"
  }
}

Any idea?

[jasonroyle]

This fixed it for me running [email protected].

[Richi2293]

For me it worked only using yarn, otherwise with npm the error remained me.
(added in devDependencies the react-devtools-core and added the resolutions )

[bvaughn]

Hi all 👋 Sorry for the trouble 😦

I believe this was something I broke when upgrading the React DevTools project's Babel and Webpack versions in https://github.com/facebook/react-devtools/pull/1235, and we're just now encountering it because we haven't released the react-devtools-core package since then.

I just published react-devtools-core v3.5.1. Can anyone let me know if this resolves the issue? (I'm unable to repro the original reported issue so it's hard for me to verify the fix.)

[davideddr]

Now it works fine for me creating a new project.
Thank you @bvaughn 👍

[bvaughn]

Yay! Thanks for verifying, @davideddr !

[bvaughn]

I'm going to mark this issue as closed for now then. Let's re-open if others are still experiencing problems!

[chuckntaylor]

I can also verify that the issue is gone. Thank you for the quick fix @bvaughn !

[ck3g]

@bvaughn yep works for me as well. (Didn't work before)

[kelset]

(thanks @bvaughn for the quick fix!)

[elanpang]

@bvaughn
npm install --save-dev [email protected]
It still not work for me with Rn 0.57.8

[jasonroyle]

@elanpang

npm install --save-dev [email protected]

You shouldn't have to do this anymore, remove react-devtools-core from your dependencies in package.json and run rm -rf node_modules && npm install this should reinstall the packages and bring the fix in along with them.

[elanpang]

@jasonroyle
oh,I understand, it is a depend lib of Rn, and Rn alway pull the latest version, like what @sunnylqm said , right?
Now it real works for me, thank you a lot !