question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

react-devtools 3.5.0 breaks new project

See original GitHub issue
devtool

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:79
  • Comments:61 (4 by maintainers)

github_iconTop GitHub Comments

28reactions
jamonholmgrencommented, Jan 4, 2019

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.

14reactions
bvaughncommented, Jan 4, 2019

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

Read more comments on GitHub >

github_iconTop Results From Across the Web

react-devtools | Yarn - Package Manager
react -devtools. This package can be used to debug non-browser-based React applications (e.g. React Native, mobile browser or embedded webview, Safari).
Read more >
Introducing the New React DevTools
We are excited to announce a new release of the React Developer Tools, available today in Chrome, Firefox, and (Chromium) Edge!
Read more >
React app works on Chrome, but not Firefox - Stack Overflow
json , I'm using redux-devtools . I had Redux DevTools installed on Chrome, but not Firefox. The site works fine after installing it...
Read more >
Migrating to Apollo Client 3.0 - Apollo GraphQL Docs
As part of migrating, we recommend removing all @apollo/react-testing dependencies. apollo-boost. The Apollo Boost project is now retired, because Apollo Client ...
Read more >
specifying the android sdk build tools version in build.grandle ...
Configure project :react-native-image-picker WARNING: The option 'android. ... facebook/react-nativereact-devtools 3.5.0 breaks new project#22863.
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found