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

Unable to resolve module react/lib/ReactComponentWithPureRenderMixin #923

Closed
daniel-zd opened this issue Apr 5, 2017 · 40 comments
Closed

Comments

@daniel-zd
Copy link

daniel-zd commented Apr 5, 2017

UnableToResolveError: Unable to resolve module react/lib/ReactComponentWithPureRenderMixin from /node_modules/react-navigation/src/views/Header.js

@VictorVolovik
Copy link

VictorVolovik commented Apr 5, 2017

Same issues with node 6.10.1, npm 4+, mac os.

@hilkeheremans
Copy link

hilkeheremans commented Apr 5, 2017

See #901 and after that see #908

tl;dr:
For now, use react-navigation's master branch here on github, and make sure you manually upgrade React to the dependency version specified by RN 0.43.

@hilkeheremans
Copy link

hilkeheremans commented Apr 5, 2017

Also linked to #906

@ryanbennettvoid
Copy link

ryanbennettvoid commented Apr 5, 2017

@hilkeheremans's tip fixed the issue.

In your package.json, replace the react-navigation dependency with this:

"react-navigation": "git+https://github.com/react-community/react-navigation.git"

then do npm install

Note: this is just a temporary fix.

januswel added a commit to react-native-jp/schoo-sample that referenced this issue Apr 6, 2017
現在リリースされているものが Native 0.43 系で動かないため、 master から取得する

react-navigation/react-navigation#923
@thurt
Copy link

thurt commented Apr 6, 2017

@ryanbennettvoid @hilkeheremans suggest you don't use master.

use the fix #809, commit hash 7edd9a7, until the next version is released.

"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"

@joemckie
Copy link

joemckie commented Apr 6, 2017

Unfortunately, even with these fixes there are still plenty of Flow errors, e.g:

node_modules/react-navigation/src/views/CardStack.js:534
534:       <SceneView
           ^ property `navigation`. Property not found in
521:         <View style={styles.container}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `View`

node_modules/react-navigation/src/views/CardStack.js:534
534:       <SceneView
           ^ property `screenProps`. Property not found in
521:         <View style={styles.container}>
             ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ props of React element `View`

Most of these are from the return type of _renderInnerCard.

Current specs:

- react-native: 0.43.2
- react-navigation: 1.0.0-beta.7
- flow-bin: 0.40.0

@thurt
Copy link

thurt commented Apr 7, 2017

note: the below comment only affects flow users

@joemckie Saw these errors as well. when i upgraded react-native to 0.43.1 using react-native-git-upgrade it appeared to bump my flow-bin version from 0.38.0 -> 0.40.0. before this upgrade i did not have flow errors coming from react-navigation.

@Dhrin
Copy link

Dhrin commented Apr 7, 2017

This work on me

"react": "16.0.0-alpha.3",
"react-native": "0.43.2",
"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"

then

rm -rf node_modules && npm install

Clean ios/android build folder:

rm -rf android/build && rm -rf ios/build

After that, just run as usual:

react-native run-ios or react-native run-android

@joemckie
Copy link

joemckie commented Apr 7, 2017

@thurt yeah it looks like there may have been some changes in how the React$Element or React$Class type is handled in between those versions? If it's not on the radar of the maintainers I'll take a look into it when I get a chance.

@JeyWong
Copy link

JeyWong commented Apr 8, 2017

这应该是v1.0.0-beta.7版本的小错误,忘记清除不必要的代码。Header.js中引入了ReactComponentWithPureRenderMixin,但后面未发现对这个引入的使用,只需要删除第12行的代码即可,亲测有效!
Delete node_modules\react-navigation\src\views\Header.js line 12 codes:
import ReactComponentWithPureRenderMixin from 'react/lib/ReactComponentWithPureRenderMixin';

@RWOverdijk
Copy link

RWOverdijk commented Apr 13, 2017

I can verify that this works for me:

{
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
}

@keeleycarrigan
Copy link

keeleycarrigan commented Apr 13, 2017

@RWOverdijk's solution works.

It kind of sucks that this has to be so complicated considering I just upgraded my app to RN 0.43.3 and I'm getting warnings in the console about NavigationExperimental yet react-navigation doesn't seem to be ready for prime time.

chillu added a commit to bnolan/echt-server that referenced this issue Apr 17, 2017
Easiest way to get a tab-bar plus title nav going.
Needs custom master pin for now, see react-navigation/react-navigation#923

Also, react-native-swiper captures all swiping events, which means it’s not
straightforward to add UI specific swipes such as “unfriend”.
chillu added a commit to bnolan/echt-server that referenced this issue Apr 17, 2017
Easiest way to get a tab-bar plus title nav going.
Needs custom master pin for now, see react-navigation/react-navigation#923

Also, react-native-swiper captures all swiping events, which means it’s not
straightforward to add UI specific swipes such as “unfriend”.
@nealz
Copy link

nealz commented Apr 17, 2017

Great! This worked for me

"dependencies": {
"react": "16.0.0-alpha.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
}

@nonameolsson
Copy link

nonameolsson commented Apr 18, 2017

This works for me when I perform a local build on my machine. But I'm having trouble to get it to work with Mobile Center.

Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` from `/Users/ci/agent/vstsagent/_work/1/s/node_modules/react-navigation/src/views/Header.js`: Module does not exist in the module map or in these directories:
  /Users/ci/agent/vstsagent/_work/1/s/node_modules/react-navigation/node_modules/react/lib
,   /Users/ci/agent/vstsagent/_work/1/s/node_modules/react/lib
,   /Users/ci/agent/vstsagent/_work/node_modules/react/lib

This might be related to https://github.com/facebook/react-native/issues/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`.

:app:bundleReleaseJsAndAssets FAILED

@arvinio
Copy link

arvinio commented Apr 18, 2017

Editing the package.json does remove the error.
However, I don't see any results when using TabNavigator or StackNavigator.
I'm running on Android.

@nonameolsson
Copy link

nonameolsson commented Apr 18, 2017

@barvin How do you edit the package.json?

@arvinio
Copy link

arvinio commented Apr 18, 2017

@nonameolsson

{
  "name": "TestApp",
  "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.6",
    "react-native": "^0.43.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
  },
  "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"
  }
}

@grabbou
Copy link

grabbou commented Apr 18, 2017

I am going to close this issue since master is working for latest React (see its dependencies). Until it ships as a npm version, pin your dependency to a commit of your choice.

@grabbou grabbou closed this as completed Apr 18, 2017
@nonameolsson
Copy link

nonameolsson commented Apr 18, 2017

So, is the solution to do the following:

"dependencies": {
    "react": "^16.0.0-alpha.6",
    "react-native": "^0.43.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git"
} 

Because when I do that my build fails :-/

@nazmulidris
Copy link

nazmulidris commented Apr 18, 2017

@nonameolsson The following works for me:

 "dependencies": {
    "lodash": "^4.17.4",
    "react": "16.0.0-alpha.6",
    "react-native": "0.43.3",
    "react-native-elements": "^0.10.3",
    "react-native-vector-icons": "^4.0.1",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git#7165efce02a60eecc41813fe5e030883996671ec"
  },

You can also check out this tutorial which goes over using the different navigators (this is where the package.json excerpt is from).

@nonameolsson
Copy link

nonameolsson commented Apr 18, 2017

@nazmulidris Thanks! Will try that!

@nazmulidris
Copy link

nazmulidris commented Apr 18, 2017

@nonameolsson You're most welcome. Here's a link to the package.json file.

@farrukhbashir
Copy link

farrukhbashir commented Apr 19, 2017

@nazmulidris i also chang the dependencies but still get error

@MohamedHussienMostafa
Copy link

MohamedHussienMostafa commented Apr 19, 2017

Still the same error after change the dependencies in package.json

{
"name": "SimpleApp",
"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.6",
"react-native": "0.43.3",
"react-navigation": "git+https://github.com/react-community/react-navigation.git"
},
"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"
}
}

@jaygarcia
Copy link

jaygarcia commented Apr 20, 2017

Confirmed working with using

"react-navigation": "git+https://github.com/react-community/react-navigation.git"

I can now see icons after doing this too! :)

@newosetroc
Copy link

newosetroc commented Apr 21, 2017

"react-navigation": "git+https://github.com/react-community/react-navigation.git"
This worked for me :) thanks

@nonameolsson
Copy link

nonameolsson commented Apr 21, 2017

Just using the repo url didn't solve it for me. I had to use a specific commit hash.

@joemckie
Copy link

joemckie commented Apr 21, 2017

This has been fixed in the latest version. Try using 1.0.0-beta.8

@Chandhru08
Copy link

Chandhru08 commented Apr 22, 2017

Guys, Im also facing the below error while trying to build an android app :
UnableToResolveError: Unable to resolve module react/lib/ReactComponentWithPureRenderMixin from c:\Users\chand\manager\node_modules\react-addons-pure-render-mixin\index.js: Module does not exist in the module map or in these directories:
c:\Users\chand\manager\node_modules\react\lib
, c:\Users\chand\node_modules\react\lib

I confused by reading all over the top to bottom in this page.

Can anybody explain what steps needs to be followed in short?

@Chandhru08
Copy link

Chandhru08 commented Apr 23, 2017

What is going on. Why Grabbou is creating a loop between #1181 and #923 ?

@jamieparkinson
Copy link

jamieparkinson commented Apr 23, 2017

@Chandhru08 github is just automatically noting that he referenced this in another issue 🙂

In short, you just need to update your dependency (for react-navigation) to something a bit more recent than the current release that's on NPM - for example, see #923 (comment)

@Chandhru08
Copy link

Chandhru08 commented Apr 23, 2017

@jamieparkinson
Thank you for explaining.

I just have this confusion now, do I have to remove other dependency items which are present in Package.json file or should I add it with existing items?

@jamieparkinson
Copy link

jamieparkinson commented Apr 23, 2017

Just replace the react-navigation item, that should be sufficient. So somewhere under dependencies you'll have something like:

"react-navigation": "1.0.0-beta.7",

And that needs to be replaced with, for example:

"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7",

Then you can follow the other steps in #923 (comment). I hope that works OK for you!

@shooterRao
Copy link

shooterRao commented Apr 24, 2017

Today I have encountered the same problem,Later, I found React-navigation": "1.0.0-beta.7 is not supported react-native version 0.43.4,so you can modify "react-native": "0.43.3" in package.json,
then

  1. rm -rf node_modules && npm install ,
  2. rm -rf android/build && rm -rf ios/build ,
    3.react-native run-ios or react-native run-android
    thank you very much @Dhrin

@wswoodruff
Copy link

wswoodruff commented Apr 26, 2017

Setting

"react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7",

like @jamieparkinson said in my package.json just fixed a slew of errors that just attacked me, and none of them looked related. Involved LinkedStateMixin, ReactComponentTreeHook, it was just weird.

And I got down this entire rabbit hole over trying to use < FlatList >

@epinapala
Copy link

epinapala commented Apr 26, 2017

Finally the below worked for me :

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

    "react-native": "0.43.4",

    "react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"

followed by rm -rf node_modules && npm install

@lifez
Copy link

lifez commented Apr 26, 2017

Same here with

 "dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.43.3",
    "react-navigation": "1.0.0-beta.8"
  }

and

"dependencies": {
    "react": "16.0.0-alpha.6",
    "react-native": "^0.43.3",
    "react-navigation": "git+https://github.com/react-community/react-navigation.git#7edd9a7"
  }

Already try with react-native 0.43.4 got the same error

@mehtamanan
Copy link

mehtamanan commented Apr 26, 2017

@lifez I am using the latter with 0.43.4 and it works fine!

Did you try:
rm -rf node_modules && npm install

And then reloading the screen multiple times?

@benjick
Copy link

benjick commented Apr 26, 2017

Why not just publish a new release to NPM with this cherrypicked?

How do I do this with yarn? Changed package.json, deleted my lockfile, re-installed but still the same problem

@grabbou
Copy link

grabbou commented Apr 26, 2017

New release will be published today containing a fix.

I am going to lock this issue to prevent unnecessary notifications.

@react-navigation react-navigation locked and limited conversation to collaborators Apr 26, 2017
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
None yet
Projects
None yet
Development

No branches or pull requests