react-native: react-devtools 3.5.0 breaks new project

I would recommend rolling back to react-devtools-core@3.4.3. I was able to do this and it worked.

yarn add --dev react-devtools-core@3.4.3
or
npm install --save-dev react-devtools-core@3.4.3

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

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.)

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 😫

done npm install --save-dev react-devtools-core@3.4.3, 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 react-devtools-core@3.4.3

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

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

(thanks @bvaughn for the quick fix!)

the solution not work for me. I use version 0.57.8

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.

@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 react-devtools-core@3.4.2

thanks its works for me

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" } }

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

Shake your device and then you’ll see the develop menu, the last one is Dev settings. BTW, I tried in react-native@0.57.8, but not work

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

@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)

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)

npm install --save-dev react-devtools-core@3.4.2

it works.

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

God bless you

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

still not working with the workarounds

@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 !

@bvaughn npm install --save-dev react-devtools-core@3.5.1 It still not work for me with Rn 0.57.8

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

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.

not working the heck npm install --save-dev react-devtools-core@3.4.2 isn’t working

Same issues here. Reverting to react-devtools-core@3.4.3 as @jamonholmgren recommended got me back up and running. Thanks!

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'),
      });
    }