react-native-mock icon indicating copy to clipboard operation
react-native-mock copied to clipboard

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

Open xareelee opened this issue 7 years ago β€’ 35 comments

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 avatar Jul 19 '17 03:07 xareelee

I've checked that the module [email protected] which has a peer-dependency with [email protected] 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, [email protected] that I installed doesn't have that file.

React-Native 0.45 and 0.46 depends on [email protected], I think the dependencies should be updated.

xareelee avatar Jul 19 '17 04:07 xareelee

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

dannyshisler avatar Jul 19 '17 11:07 dannyshisler

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?

RealOrangeOne avatar Jul 19 '17 12:07 RealOrangeOne

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 avatar Jul 24 '17 18:07 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

gabceb avatar Jul 28 '17 12:07 gabceb

and how to fix?

peixin avatar Aug 09 '17 02:08 peixin

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.

mgeist avatar Aug 14 '17 01:08 mgeist

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 avatar Aug 15 '17 18:08 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.

sebas5384 avatar Aug 15 '17 18:08 sebas5384

@RealOrangeOne , what is the plan to resolve this?

faisalil avatar Aug 21 '17 19:08 faisalil

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

shqld avatar Sep 01 '17 06:09 shqld

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

patrys avatar Sep 01 '17 08:09 patrys

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

shqld avatar Sep 03 '17 21:09 shqld

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

patrys avatar Sep 04 '17 08:09 patrys

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

shqld avatar Sep 06 '17 08:09 shqld

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

timurridjanovic avatar Sep 06 '17 15:09 timurridjanovic

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

shqld avatar Sep 07 '17 04:09 shqld

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

TheaLanherne avatar Sep 27 '17 16:09 TheaLanherne

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

gabceb avatar Sep 27 '17 19:09 gabceb

@gabceb We are tomorrow :)

ebaynaud avatar Sep 28 '17 14:09 ebaynaud

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

jcguarinpenaranda avatar Sep 28 '17 22:09 jcguarinpenaranda

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

mhd999 avatar Sep 29 '17 07:09 mhd999

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

gabceb avatar Oct 01 '17 09:10 gabceb

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"

MincePie avatar Oct 30 '17 22:10 MincePie

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

ebaynaud avatar Oct 30 '17 22:10 ebaynaud

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

andrewda avatar Oct 30 '17 23:10 andrewda

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

fdnhkj avatar Oct 31 '17 16:10 fdnhkj

@fdnhkj I'm not sure but try again with [email protected].

shqld avatar Nov 28 '17 07:11 shqld

Did someone actually make this work ?

julestruong avatar Dec 07 '17 09:12 julestruong

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.

jeaye avatar Dec 08 '17 00:12 jeaye