Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` #923

domisooo · 2017-04-05T10:04:26Z

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

The text was updated successfully, but these errors were encountered:

VictorVolovik · 2017-04-05T10:10:33Z

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

hilkeheremans · 2017-04-05T10:17:14Z

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 · 2017-04-05T10:18:00Z

Also linked to #906

ryanbennettvoid · 2017-04-05T20:28:27Z

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

現在リリースされているものが Native 0.43 系で動かないため、 master から取得する react-navigation/react-navigation#923

thurt · 2017-04-06T15:29:14Z

@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 · 2017-04-06T22:39:34Z

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 · 2017-04-07T00:33:09Z

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 · 2017-04-07T05:18:30Z

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 · 2017-04-07T06:38:49Z

@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 · 2017-04-08T16:09:03Z

这应该是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';

…ing action creators

…ound here - react-navigation/react-navigation#923

RWOverdijk · 2017-04-13T19:37:31Z

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 · 2017-04-13T23:28:42Z

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

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 · 2017-04-17T09:55:18Z

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 · 2017-04-18T09:44:49Z

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 · 2017-04-18T13:08:44Z

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 · 2017-04-18T13:09:18Z

@barvin How do you edit the package.json?

arvinio · 2017-04-18T13:10:34Z

@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 · 2017-04-18T13:15:20Z

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.

nonameolsson · 2017-04-18T13:20:29Z

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 · 2017-04-18T13:29:43Z

@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 · 2017-04-18T13:31:01Z

@nazmulidris Thanks! Will try that!

nazmulidris · 2017-04-18T13:32:15Z

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

farrukhbashir · 2017-04-19T12:07:47Z

@nazmulidris i also chang the dependencies but still get error

MohamedHussienMostafa · 2017-04-19T13:28:07Z

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 · 2017-04-20T03:13:11Z

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 · 2017-04-21T03:26:21Z

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

nonameolsson · 2017-04-21T06:26:01Z

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

joemckie · 2017-04-21T07:13:38Z

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

Chandhru08 · 2017-04-22T18:03:19Z

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 · 2017-04-23T17:42:36Z

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

jamieparkinson · 2017-04-23T18:20:46Z

@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 · 2017-04-23T18:40:41Z

@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 · 2017-04-23T19:28:09Z

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 · 2017-04-24T08:21:29Z

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

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

wswoodruff · 2017-04-26T03:12:43Z

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 · 2017-04-26T03:25:55Z

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 · 2017-04-26T05:42:30Z

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

manan · 2017-04-26T06:51:52Z

@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 · 2017-04-26T09:38:49Z

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 · 2017-04-26T11:33:39Z

New release will be published today containing a fix.

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

philohelp mentioned this issue Apr 6, 2017

Error with the latest version of React Native 0.43.0 aksonov/react-native-router-flux#1761

Closed

allmaxgit mentioned this issue Apr 7, 2017

Error loading up after upgrade to 0.43 facebook/react-native#13314

Closed

mamodom referenced this issue in lycan-city/werewolf-virtual-cards Apr 8, 2017

wip, trying to figure out if react-navigation plays nice with connect…

9c7107b

…ing action creators

pxue mentioned this issue Apr 8, 2017

react-navigation seems dosen't support react-native@0.43? #964

Closed

joncursi mentioned this issue Apr 9, 2017

Unable to resolve module react/lib/ReactComponentWithPureRenderMixin satya164/react-navigation-addons#5

Closed

ragnorc mentioned this issue Apr 10, 2017

react-navigation in "react-native": "0.43.2"show error code 500 #979

Closed

harshq mentioned this issue Apr 11, 2017

Unable to resolve ReactComponentWithPureRenderMixin /src/views/Header.js #989

Closed

nazmulidris added a commit to nazmulidris/react-native-weather that referenced this issue Apr 12, 2017

1) added react-navigation package and ran into issue and found workar…

24c79fe

…ound here - react-navigation/react-navigation#923

nonameolsson mentioned this issue Apr 14, 2017

Publish 1.0.0-beta.8 to use with RN 0.43 #906

Closed

bhoop mentioned this issue Apr 14, 2017

function for navigationOptions not working #1052

Closed

grabbou closed this as completed Apr 18, 2017

LeesinYasuo mentioned this issue Apr 19, 2017

Unable to resolve module react-addons-pure-render-mixin #1108

Closed

sytolk mentioned this issue Apr 19, 2017

Duplicate module name: NavigatorIOS #1112

Closed

grabbou mentioned this issue Apr 22, 2017

Stack navigator not work #1117

Closed

grabbou mentioned this issue Apr 23, 2017

unable to resolve pureMixin #1181

Closed

react-navigation locked and limited conversation to collaborators Apr 26, 2017

Unable to resolve module react/lib/ReactComponentWithPureRenderMixin #923

Unable to resolve module react/lib/ReactComponentWithPureRenderMixin #923

Comments

domisooo commented Apr 5, 2017 • edited Loading

VictorVolovik commented Apr 5, 2017

hilkeheremans commented Apr 5, 2017

hilkeheremans commented Apr 5, 2017

ryanbennettvoid commented Apr 5, 2017 • edited Loading

thurt commented Apr 6, 2017 • edited Loading

joemckie commented Apr 6, 2017 • edited Loading

thurt commented Apr 7, 2017 • edited Loading

Dhrin commented Apr 7, 2017

joemckie commented Apr 7, 2017 • edited Loading

JeyWong commented Apr 8, 2017 • edited Loading

RWOverdijk commented Apr 13, 2017

keeleycarrigan commented Apr 13, 2017

nealz commented Apr 17, 2017 • edited Loading

nonameolsson commented Apr 18, 2017

arvinio commented Apr 18, 2017

nonameolsson commented Apr 18, 2017

arvinio commented Apr 18, 2017

grabbou commented Apr 18, 2017

nonameolsson commented Apr 18, 2017

nazmulidris commented Apr 18, 2017 • edited Loading

nonameolsson commented Apr 18, 2017

nazmulidris commented Apr 18, 2017

farrukhbashir commented Apr 19, 2017

MohamedHussienMostafa commented Apr 19, 2017

jaygarcia commented Apr 20, 2017

newosetroc commented Apr 21, 2017

nonameolsson commented Apr 21, 2017

joemckie commented Apr 21, 2017

Chandhru08 commented Apr 22, 2017

Chandhru08 commented Apr 23, 2017

jamieparkinson commented Apr 23, 2017 • edited Loading

Chandhru08 commented Apr 23, 2017

jamieparkinson commented Apr 23, 2017 • edited Loading

shooterRao commented Apr 24, 2017

wswoodruff commented Apr 26, 2017 • edited Loading

epinapala commented Apr 26, 2017 • edited Loading

lifez commented Apr 26, 2017

manan commented Apr 26, 2017

benjick commented Apr 26, 2017

grabbou commented Apr 26, 2017

Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` #923

Unable to resolve module `react/lib/ReactComponentWithPureRenderMixin` #923

domisooo commented Apr 5, 2017 •

edited

Loading

ryanbennettvoid commented Apr 5, 2017 •

edited

Loading

thurt commented Apr 6, 2017 •

edited

Loading

joemckie commented Apr 6, 2017 •

edited

Loading

thurt commented Apr 7, 2017 •

edited

Loading

joemckie commented Apr 7, 2017 •

edited

Loading

JeyWong commented Apr 8, 2017 •

edited

Loading

nealz commented Apr 17, 2017 •

edited

Loading

nazmulidris commented Apr 18, 2017 •

edited

Loading

jamieparkinson commented Apr 23, 2017 •

edited

Loading

jamieparkinson commented Apr 23, 2017 •

edited

Loading

wswoodruff commented Apr 26, 2017 •

edited

Loading

epinapala commented Apr 26, 2017 •

edited

Loading