react-native: Post 0.43 upgrade - Unable to resolve module ReactComponentTreeHook from node_modules/react-native/Libraries/Performance/Systrace.js

Description

Unable to launch app after upgrading to 0.43.2.

Reproduction Steps and Sample Code

Upgraded react-native:

$ npm install -g react-native-git-upgrade
$ npm install react-native@latest --save
$ react-native-git-upgrade

There were no conflicts during the react-native-git-upgrade. I’m not sure what code examples to provide since the crash happens during the launch.

I’ve also tried the steps here: https://github.com/facebook/react-native/issues/4968 with no luck.

Additional Information

  • React Native version: 0.43.2
  • Platform: both
  • Development Operating System: MacOS
  • Dev tools: Xcode 8.3, Android Studio 2.3.1

package.json:

{
  "name": "zzzzz",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "ava",
    "watch": "ava --watch",
    "coverage": "nyc ava"
  },
  "dependencies": {
    "axios": "^0.15.3",
    "base-64": "^0.1.0",
    "lodash": "^4.17.4",
    "react": "^16.0.0-alpha.6",
    "react-native": "^0.43.2",
    "react-native-audio-streamer": "0.0.4",
    "react-native-audio-streaming": "^2.3.1",
    "react-native-code-push": "^1.17.3-beta",
    "react-native-drawer": "^2.3.0",
    "react-native-fabric": "^0.4.1",
    "react-native-fs": "^2.1.0-rc.1",
    "react-native-keyboard-aware-scroll-view": "^0.2.7",
    "react-native-music-control": "^0.4.0",
    "react-native-progress": "^3.2.0",
    "react-native-router-flux": "git+ssh://git@github.com/cladeco/react-native-router-flux.git",
    "react-native-searchbar": "^1.7.0",
    "react-native-sound": "^0.9.0",
    "react-native-vector-icons": "^4.0.0",
    "react-native-video": "git+ssh://git@github.com/react-native-community/react-native-video.git#master",
    "react-native-video-player": "^0.6.1",
    "react-redux": "^5.0.1",
    "redux": "^3.6.0",
    "redux-logger": "^2.7.4",
    "redux-persist": "^4.0.1",
    "redux-thunk": "^2.1.0"
  },
  "devDependencies": {
    "ava": "^0.18.2",
    "babel-jest": "18.0.0",
    "babel-preset-react-native": "1.9.1",
    "enzyme": "^2.7.1",
    "eslint": "^3.15.0",
    "eslint-config-airbnb": "^14.1.0",
    "eslint-plugin-import": "^2.2.0",
    "eslint-plugin-jsx-a11y": "^4.0.0",
    "eslint-plugin-react": "^6.10.0",
    "jest": "18.1.0",
    "jsdom": "^9.12.0",
    "mockery": "^2.0.0",
    "nyc": "^10.1.2",
    "react-addons-test-utils": "^15.4.2",
    "react-dom": "^15.4.2",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "15.4.2",
    "redux-devtools": "^3.3.1",
    "sinon": "^1.17.7"
  },
  "jest": {
    "preset": "react-native"
  },
  "ava": {
    "babel": "inherit",
    "require": [
      "babel-register",
      "babel-polyfill",
      "react-native-mock/mock",
      "./__tests__/_Setup.js"
    ]
  },
  "nyc": {
    "include": [
      "app/**/*.js"
    ]
  }
}

About this issue

  • Original URL
  • State: closed
  • Created 7 years ago
  • Reactions: 27
  • Comments: 26 (4 by maintainers)

Commits related to this issue

Most upvoted comments

For me react-native-git-upgrade did the trick.

Thanks @rom1k!

For me it’s:

...
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
...

If react-native-git-upgrade doesn’t work for you, make sure your react version doesn’t exceed what’s specified as a peer dependency for react native. Currently the peer dependency version is 16.0.0-alpha.6 If it got too far ahead, just do:

rm -rf node_modules/react
npm i react@16.0.0-alpha.6 -S

OMG… i can’t believe how this actually solved mine, because after trying all the stuff people suggested here i couldn’t make it work. Did prolly 10~ rm -rf node_modules && npm install, then cleaning packager cache, running react-native-git-upgrade, restarted my mac 2 times, i didn’t even know what was going on, until i saw a post in stackoverflow saying to “install react to latest version”… i said, how? i already got “react”: “^16.0.0-alpha.6”, on my package.json, so that shouldn’t be the case… i checked just in case my last npm install… and it was effectively complaining about react not being installed for my react-native… HOW DA ***** that happened? i spent 2 hours trying to figure this out. How was node not installing react if it was in the package.json? is this some kind of existing bug?

So if you still have this problem, check on that.

And just simply do:

npm install --save react@16.0.0-alpha.6

On your project root.

I have this exact same error after upgrading to 0.43.2, BUT only on one of my computers. Works fine on the other. I have tried resetting cache, reinstalling node modules etc but I still have the error. Anyone know the real cause of this error?

UPDATE: Found a solution to my problem. I had a ^ before the version number of my dependencies in package.json, which means the correct version of that module didn’t get installed even though I specified it. I’m not sure which change fixed it but probably one of these:

"react": "^16.0.0-alpha.3" ====> "react": "16.0.0-alpha.3",
"react-native-google-places": "^2.1.0",  ====> "react-native-google-places": "2.1.0",
"react-native-maps": "^0.13.1", ====> "react-native-maps": "0.13.1",

I have the same problem

Cannot find module ‘react/lib/ReactComponentTreeHook’ from ‘ReactDebugTool.js’

"dependencies": {
    "react": "16.0.0-alpha.12",
    "react-native": "0.45.1",
    "react-native-linear-gradient": "2.0.0",
    "react-native-material-textfield": "0.6.0",
    "react-navigation": "1.0.0-beta.11",
    "react-redux": "5.0.5",
    "redux-saga": "0.15.3"
  },
  "devDependencies": {
    "babel-jest": "20.0.3",
    "babel-preset-react-native": "1.9.2",
    "chai": "4.0.2",
    "chai-as-promised": "7.0.0",
    "colors": "1.1.2",
    "cors": "2.8.3",
    "cucumber": "2.0.0-rc.9",
    "debug": "2.6.8",
    "express": "4.15.3",
    "jest": "20.0.4",
    "lodash": "4.17.4",
    "react-test-renderer": "16.0.0-alpha.12",
    "redux": "3.6.0",
    "standard": "10.0.2",
    "wd": "1.2.0"
  },

react-native-git-upgrade --> 0.2.7 node --> v8.1.0 npm --> 5.0.3

Any idea?

That’s true. If you are using RN 0.44, you’d better keep it as below:

    "react": "16.0.0-alpha.6",
    "react-native": "0.44.0",

don’t use ^16.0.0-alpha.6, otherwise when you run npm update, it will become ^16.0.0-alpha.12, then cause this error. Or maybe you can upgrade react-native to 0.45.

I tried react-native-git-upgrade but needed to do @msqar’s suggestion of upgrading to 16.0.0-alpha.6.

That solved it for me.

I can verify that there’s no lib/ in node_modules/react/, but I’m not sure why the npm install wouldn’t have taken care of that. Any help would be greatly appreciated 😃

npm install react did the trick for me. if it does not for you, then try the same with react-native - npm install react-native P.S. Just in case: run this commands in your project main directory

With 0.44.2 ReactComponentTreeHook cannot be found because RN (Systrace.js) tries to import files from /react/lib/, which does not exist at all in React 16.0.0-alpha.12. I’m just wondering how RN 0.44 works with anybody?

I was able to get past this. I started at my screen for a while, as well as upgraded a few of my dev dependencies:

{
    "react-addons-test-utils": "16.0.0-alpha.3",
    "react-dom": "16.0.0-alpha.6",
    "react-native-mock": "^0.3.1",
    "react-test-renderer": "16.0.0-alpha.6",
}

Not sure which step worked.