Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'

[xareelee]

After adding and importing this lib, testing with jest shows errors for all test suites:

  ● Test suite failed to run

    Cannot find module 'react/lib/ReactComponentTreeHook' from 'ReactDebugTool.js'

      at Resolver.resolveModule (node_modules/jest-resolve/build/index.js:179:17)
      at Object.<anonymous> (node_modules/react-addons-perf/node_modules/react-dom/lib/ReactDebugTool.js:16:30)

Part of package.json:

{
  "dependencies": {
    "react": "16.0.0-alpha.12", 
    "react-native": "0.46.3",
    ...
  }
  "devDependencies": {
    "jest": "^20.0.4",                               // 20.0.4
    "react-dom": "16.0.0-alpha.12",
    "react-native-mock": "^0.3.1",                   // 0.3.1
    "react-test-renderer": "16.0.0-alpha.12",
    ...
  }
}

Those errors are raised from react-addons-perf which is depended by react-native-mock. The version of react-addons-perf is 15.4.2. I'm not sure whether it is related to the version of react (16.0.0-alpha.12).

[xareelee]

I've checked that the module react-addons-perf@15.4.2 which has a peer-dependency with react-dom@15.4.2 which has a peer-dependency with react@^15.6.1, and it leads to this issue.

node_modules/react-addons-perf/node_modules/react-dom/lib/ReactDebugTool.js:16:30:

var ReactComponentTreeHook = require('react/lib/ReactComponentTreeHook');

However, react@16.0.0-alpha.16 that I installed doesn't have that file.

React-Native 0.45 and 0.46 depends on react@16.0.0-alpha, I think the dependencies should be updated.

[dannyshisler]

I've got the same problem - I'm using Mocha. I get:

`module.js:471 throw err; ^

Error: Cannot find module 'react/lib/ReactComponentTreeHook'`

I'm using react-native 0.46.4

[RealOrangeOne]

This issue would resolve itself if react@16 would come out of alpha. But yes I agree that fixing the dependencies should fix the issue, however i'm not sure requiring ^16 is wise for backwards compatability. Perhaps experimenting with swapping it to a peer dependency might solve it?

[gabceb]

The hook was moved from addons to a different location for React 16 as per https://github.com/facebook/react/commit/f2fc1822501456a26b458a17851319904ffabe2a. I'm trying to get this to work with mockery by switching the loader location and will report back if I am able to get it to work

[gabceb]

React 16 Beta is out and they have oficially said perf add-ons wont be coming back the same way it was before

https://github.com/facebook/react/issues/10294

[peixin]

and how to fix?

[mgeist]

What worked for me was to downgrade to react-native 0.44.x for the time being. react-native: 0.44.x react: 16.0.0-alpha.6

Although I'm using create-react-native-app / expo, so I'm not sure if this will work for others.

[sebas5384]

I'm having the same issue here but my error is coming from react-apollo's react-dom, somebody had a solution? oh! I'm using Jest.

[sebas5384]

I resolved by upgrading my node to v8.3.0 (npm v5.3.0), removing all the node_modules and then installing all again. Btw, I'm using yarn.

[faisalil]

@RealOrangeOne , what is the plan to resolve this?

[shqld]

Is there any valid workarounds except for downgrading react-native? I'm using the latest version of it now.

[patrys]

I've tried to fork this and upgrade it to depend on the latest react but I couldn't get perf tools to work (latest release seems to target 16.0.0-alpha.3).

[shqld]

I made a very simple fork and we can use it for the time being until an officially release. https://github.com/shqld/react-native-mock

[patrys]

@shqld for a very simple fork you've committed a whole lot of unrelated stylistic changes 😞

[shqld]

@patrys It's like a mock of the future release of this library just for me😞 Fixing some syntax was due to console errors emitted when testing with Jest.

[timurridjanovic]

@shqld I'm using your fork in my package.json like this: "react-native-mock": "https://github.com/shqld/react-native-mock/tarball/master", but when I install everything, I'm still missing the build directory, and cant seem to build it using npm build. Can you describe how I can install your fork?

[shqld]

@timurridjanovic It's intended that there's no build/ and you don't have to build. To save time building, I've committed https://github.com/shqld/react-native-mock/commit/d1a224dbc3a648af72b7683953c71cee90a369c6 so that it can be directly used without building. (And if you still like to build, you have to npm install in the root of this fork directory first.) So, just install it and then you can use it.

[TheaLanherne]

@RealOrangeOne you said "This issue would resolve itself if react@16 would come out of alpha" but I'm not sure if react-native-mock is fully compatible with react 16. React 16 is out of alpha now, so I tried using your package with react version 16.0.0 (and the latest version of react-native 0.48.4), but I still seem to be getting an error when running my tests using react-native-mock (although it does seem to now be a different error from the ReactComponentTreeHook error we were originally getting):

TypeError: Cannot read property 'number' of undefined at Object.\<anonymous> (/node_modules/react-native-mock/build/propTypes/LayoutPropTypes.js:21:31)

[gabceb]

All prop types have to be moved from React to the prop-types package to support React 16. Also, all propTypes from react-native are now imported from the root as viewPropTypes instead of from the View object. See the commit below for examples of porting. If no one has picked it up I will try to submit a PR tomorrow

https://github.com/cjcheshire/react-native-multi-slider/commit/6f0d2cb480ccd7190ea9a16e678864f96698d3b2#diff-c71c6f99b408b5a1afd81a3839ce5d4b

[ebaynaud]

@gabceb We are tomorrow :)

[jcguarinpenaranda]

I found this issue today, when I tried to test my RN components with enzyme and enzyme-to-json.

I am using:

• "react-native-mock": "^0.3.1"
• "react-native": "^0.48.4"
• "react": "16.0.0-alpha.12"
• "enzyme": "^3.0.0"

If somebody has a solution for this it would be very helpful

[mhd999]

@jcguarinpenaranda think the author mentions the package is not working with react in alpha.

[gabceb]

@ebaynaud it seems that someone beat me to it https://github.com/RealOrangeOne/react-native-mock/pull/130 👍

[MincePie]

What is the solution to this error - sorry, I don't understand what #130 suggests as a solution to this error: Uncaught Error: Cannot find module "react/lib/ReactComponentTreeHook"

[ebaynaud]

@MincePi deprecated proptypes import are fixed in #130 (importing from prop-types package directly instead of importing from React). But #130 is not merged yet so still not possible to use react-native-mock without errors with latest react-native version...

[andrewda]

At GitPoint, we're using @shqld's fork (https://github.com/shqld/react-native-mock) and it's working fine. I'd suggest using that until #130 is merged (hopefully soon...)

[fdnhkj]

@andrewda I still get errors with @shqld 's fork.

Cannot find module 'react/lib/React' from 'ReactTestUtils.js'

With following dependencies

"react": "16.0.0-alpha.12",
"react-native": "^0.48.4",
"enzyme": "^3.1.0",
"enzyme-adapter-react-16": "^1.0.2",
"jest": "21.0.1",
"jest-enzyme": "^4.0.1",
"react-dom": "^15.6.1",
"react-native-mock": "git+https://github.com/shqld/react-native-mock.git",
"react-test-renderer": "16.0.0-alpha.12",

[shqld]

@fdnhkj I'm not sure but try again with react-dom@16.0.0-alpha.12.

[julestruong]

Did someone actually make this work ?

[jeaye]

I'm seeing Error: Cannot find module 'react/lib/LinkedStateMixin' which I believe to be of the same cause as this, so an update would be great.

[jordanfloyd]

@shqld I'm having issues with your fork also,

SyntaxError: Unexpected token import
    at Object.exports.runInThisContext (vm.js:78:16)
    at Module._compile (module.js:543:28)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (*/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
    at Module.require (module.js:498:17)
    at require (internal/module.js:20:19)
    at Object.<anonymous> (*/node_modules/react-native-mock/mock.js:1:25)
    at Module._compile (module.js:571:32)
    at Module._extensions..js (module.js:580:10)
    at Object.require.extensions.(anonymous function) [as .js] (*/node_modules/babel-register/lib/node.js:152:7)
    at Module.load (module.js:488:32)
    at tryModuleLoad (module.js:447:12)
    at Function.Module._load (module.js:439:3)
*/node_modules/react-native-mock/src/react-native.js:4
import React from 'react';
^^^^^^

Using react-native 0.47.2

[akahd]

Any update on this? Still have this issue now.

package.json: { "react": "16.0.0-alpha.12", "react-native": "0.48.4", "jest": "21.2.1", "jest-react-native": "18.0.0", "jest-serializer-enzyme": "1.0.0", "react-addons-perf": "15.4.2", "react-addons-test-utils": "15.6.2", "react-dom": "15.6.2", "react-native-mock": "0.3.1" }

Hope this get fixed quickly

[Twinbird24]

@akahd I have a similar set up to you, and my tests are running without the error. Try to update to latest version of react-dom (16.2.0) and react-native (0.49.3). I'm also using an older version of jest (18.1.0), and I don't have react-addons-perf although that shouldn't interfere with anything.

[eduardomoroni]

A solution I found here was: Installing compatible react-dom version as devDependency. Some people on this thread are using React 16 and react-dom < 16. I think this is the problem.

[nicholaslee119]

My solution is to replace react-native-mock with react-native-mock-render Because the dependency react-dom@15 in react-native-mock is too old for my react@16