Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
qpowell opened this issue Apr 7, 2017 · 26 comments
Labels
Resolution: Locked This issue was locked by the bot.

Comments

@qpowell
Copy link
Contributor

qpowell commented Apr 7, 2017

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: #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"
    ]
  }
}
@qpowell
Copy link
Contributor Author

qpowell commented Apr 7, 2017

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

@qpowell
Copy link
Contributor Author

qpowell commented Apr 7, 2017

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.

@qpowell qpowell closed this as completed Apr 7, 2017
@budiga
Copy link

budiga commented Apr 8, 2017

I got this problem too.Can you tell me how to solve this problem?
this is my package.json below:
{
"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.0.0-alpha.8",
"react-native": "0.43.2",
"react-navigation": "^1.0.0-beta.7"
},
"devDependencies": {
"babel-jest": "19.0.0",
"babel-preset-react-native": "1.9.1",
"jest": "19.0.2",
"react-test-renderer": "16.0.0-alpha.6"
},
"jest": {
"preset": "react-native"
}
}

@budiga
Copy link

budiga commented Apr 8, 2017

error message:
error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactComponentTreeHook from /Users/liuxuehuan/Desktop/react/exec/MyApp/node_modules/react-native/Libraries/Performance/Systrace.js: Module does not exist in the module map or in these directories:
/Users/liuxuehuan/Desktop/react/exec/MyApp/node_modules/react-native/node_modules/react/lib
, /Users/liuxuehuan/Desktop/react/exec/MyApp/node_modules/react/lib
, /Users/liuxuehuan/node_modules/react/lib

but I did have the file in this derectory:/Users/liuxuehuan/node_modules/react/lib,why didn't it work?@qpowell @sharnik @redmar

@pfulop
Copy link
Contributor

pfulop commented Apr 8, 2017

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

@mik-rom
Copy link

mik-rom commented Apr 10, 2017

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

@mgscreativa
Copy link

Thanks @Rom1k!

For me it's:

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

@hjh5696
Copy link

hjh5696 commented Apr 12, 2017

Hi guys!
Specifying 'react' version without ^ was definitely helpful!
But there's another problem to me. When I click warning box at the bottom of screen(the yellow one), suddenly app crashes down.
ReactNative does not print any error log, so I tried it with xcode.
Error log is like below

2017-04-12 19:18:06.838 [error][tid:main][UIView+React.m:173] Invalid layout for (15)<RCTScrollView: 0x7ffa34e3cb70; reactTag: 15; frame = (0 233; 414 0); clipsToBounds = YES; layer = <CALayer: 0x600000223fc0>>. position: {207, nan}. bounds: {{0, 0}, {414, nan}}
2017-04-12 19:18:06.844 MyProject[17665:385202] *** Terminating app due to uncaught exception 'CALayerInvalidGeometry', reason: 'CALayer position contains NaN: [0 nan]'
*** First throw call stack:
(
0 CoreFoundation 0x0000000112136d4b __exceptionPreprocess + 171
1 libobjc.A.dylib 0x0000000110b9921e objc_exception_throw + 48
2 CoreFoundation 0x00000001121a02b5 +[NSException raise:format:] + 197
3 QuartzCore 0x00000001146aef92 _ZN2CA5Layer12set_positionERKNS_4Vec2IdEEb + 152
4 QuartzCore 0x00000001146af107 -[CALayer setPosition:] + 44
5 QuartzCore 0x00000001146af772 -[CALayer setFrame:] + 650
6 UIKit 0x0000000114d079b4 -[UIWebDocumentView _notifyContentHostingLayersOfScaleChange] + 111
7 UIKit 0x0000000114d02b61 -[UIWebDocumentView setFrame:] + 287
8 UIKit 0x00000001150dfc95 -[UIWebBrowserView setFrame:] + 199
9 UIKit 0x0000000114d50fc9 -[UIWebView _frameOrBoundsChanged] + 508
10 UIKit 0x0000000114d51096 -[UIWebView setFrame:] + 166
11 MyProject 0x000000010ff121d9 -[RCTWebView layoutSubviews] + 185
12 UIKit 0x0000000114a8bab8 -[UIView(CALayerDelegate) layoutSublayersOfLayer:] + 1237
13 QuartzCore 0x00000001146b8bf8 -[CALayer layoutSublayers] + 146
14 QuartzCore 0x00000001146ac440 _ZN2CA5Layer16layout_if_neededEPNS_11TransactionE + 366
15 QuartzCore 0x00000001146ac2be _ZN2CA5Layer28layout_and_display_if_neededEPNS_11TransactionE + 24
16 QuartzCore 0x000000011463a318 _ZN2CA7Context18commit_transactionEPNS_11TransactionE + 280
17 QuartzCore 0x00000001146673ff _ZN2CA11Transaction6commitEv + 475
18 QuartzCore 0x0000000114667d6f _ZN2CA11Transaction17observer_callbackEP19__CFRunLoopObservermPv + 113
19 CoreFoundation 0x00000001120db267 CFRUNLOOP_IS_CALLING_OUT_TO_AN_OBSERVER_CALLBACK_FUNCTION + 23
20 CoreFoundation 0x00000001120db1d7 __CFRunLoopDoObservers + 391
21 CoreFoundation 0x00000001120bff8e __CFRunLoopRun + 1198
22 CoreFoundation 0x00000001120bf884 CFRunLoopRunSpecific + 420
23 GraphicsServices 0x0000000117c3ea6f GSEventRunModal + 161
24 UIKit 0x00000001149c6c68 UIApplicationMain + 159
25 MyProject 0x000000010fe3c5cf main + 111
26 libdyld.dylib 0x000000011639b68d start + 1
27 ??? 0x0000000000000001 0x0 + 1
)
libc++abi.dylib: terminating with uncaught exception of type NSException
(lldb)

is there any idea?

@budiga
Copy link

budiga commented Apr 16, 2017

react-native-git-upgrade work for me too!thanks,@pfulop

@bullantt
Copy link

react-native-git-upgrade work for me @pfulop

@dondoko-susumu
Copy link

react-native-git-upgrade work for me too! thanks,@pfulop

@JulianKingman
Copy link

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

@msqar
Copy link

msqar commented May 15, 2017

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.

jcharlet pushed a commit to jcharlet/react_native_listview_bug that referenced this issue May 19, 2017
@uiuco
Copy link

uiuco commented May 22, 2017

react-native-git-upgradework for me too! thanks

@danleveille
Copy link

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.

@tapz
Copy link

tapz commented Jun 2, 2017

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?

@tapz
Copy link

tapz commented Jun 5, 2017

The imports seem to be fixed in RN 0.45. Looks like they were too hasty release something unfinished as 0.44.

@fengerzh
Copy link

fengerzh commented Jun 7, 2017

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.

@praisegeek
Copy link

@danleveille specifying a version number should work as well. i.e react-native-git-upgrade 0.43.4

@ToniChaz
Copy link

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?

@LAITONEN
Copy link
Contributor

LAITONEN commented Jun 16, 2017

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

@kipricker
Copy link

kipricker commented Jun 16, 2017

@ToniChaz When upgrading react to a alpha/beta version, make sure you also upgrade any other packages you are using from the react repo. In our case we needed to upgrade react-dom which was using deprecated classes in react.

yarn upgrade react-dom@16.0.0-alpha.12

@wwwjiandan
Copy link

I fix this issue by install react,the command is "npm install react@16.0.0-alpha.6 -S"
this is my package.json 's dependencies

"dependencies": {
"react": "^16.0.0-alpha.6",
"react-native": "^0.43.3",
"react-native-extended-stylesheet": "^0.3.0"
}

@Nahueleti
Copy link

The solution proposed by @LAITONEN worked for me, had the same problem as @ToniChaz

@Manibasto
Copy link

Unable to resolve module react/lib/ReactComponentTreeHook from /Users/Vaiha/Desktop/mani/AwesomeProject/node_modules/react-native/Libraries/Performance/Systrace.js: Module does not exist in the module map or in these directories:
/Users/Vaiha/Desktop/mani/AwesomeProject/node_modules/react-native/node_modules/react/lib
, /Users/Vaiha/Desktop/mani/AwesomeProject/node_modules/react/lib

This might be related to #4968
To resolve try the following:

  1. Clear watchman watches: watchman watch-del-all.
  2. Delete the node_modules folder: rm -rf node_modules && npm install.
  3. Reset packager cache: rm -fr $TMPDIR/react-* or npm start -- --reset-cache.

RCTFatal
-[RCTBatchedBridge stopLoadingWithError:]
__25-[RCTBatchedBridge start]_block_invoke_2
_dispatch_call_block_and_release
_dispatch_client_callout
_dispatch_main_queue_callback_4CF
CFRUNLOOP_IS_SERVICING_THE_MAIN_DISPATCH_QUEUE
__CFRunLoopRun
CFRunLoopRunSpecific
GSEventRunModal
UIApplicationMain
main
start
0x0

please help me how to solve

@LA
Copy link

LA commented Sep 28, 2017

I got this issue because I upgraded React without updating React-Native. Reverting React back to old version (like @wwwjiandan 's solution) fixed it.

@facebook facebook locked as resolved and limited conversation to collaborators May 24, 2018
@react-native-bot react-native-bot added the Resolution: Locked This issue was locked by the bot. label Jul 18, 2018
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
Resolution: Locked This issue was locked by the bot.
Projects
None yet
Development

No branches or pull requests