React-native: RN 0.43 upgrade error ReactComponentWithPureRenderMixin

Created on 6 Apr 2017 · 26Comments · Source: facebook/react-native

Description

error: bundling: UnableToResolveError: Unable to resolve module react/lib/ReactComponentWithPureRenderMixin from C:\project\node_modules\react-addons-pure-render-mixin\index.js: Module does not exist in the module map or in these directories:
C:\project\node_modules\react\lib

Reproduction Steps and Sample Code

After Upgrade from 0.42 to 0.43 we receive the following error. Requested file does not exist on node_modules.
We have clear node_modules and run "npm install"
We are using "react": "16.0.0-alpha.6"

Additional Information

React Native version: 0.43
Platform: Android
Development Operating System: Windows
Dev tools: -

Locked

Source

stefan0s

👍7

Most helpful comment

It seems that "react-native-router-flux" cause the problem to me because it has dependency with "react-addons-pure-render-mixin"

stefan0s on 6 Apr 2017

👍8 🎉1

All 26 comments

Here is the excerpt from react documentation

The PureRenderMixin mixin predates React.PureComponent. This reference doc is provided for legacy purposes, and you should consider using React.PureComponent instead.

dulmandakh on 6 Apr 2017

Similar problem here

EnriqueDev on 6 Apr 2017

There are multiple blog posts on react won't be supporting mixins anymore. Also above excerpt from react documentation recommends PureComponent instead of PureRenderMixin. I changed my code to drop PureRenderMixin, and use PureComponent instead. And everything is fine.

example blog post https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

dulmandakh on 6 Apr 2017

https://medium.com/@dan_abramov/mixins-are-dead-long-live-higher-order-components-94a0d2f9e750

dulmandakh on 6 Apr 2017

👎2

It seems that "react-native-router-flux" cause the problem to me because it has dependency with "react-addons-pure-render-mixin"

stefan0s on 6 Apr 2017

👍8 🎉1

I've integrated ReactNavigation today, and I'm facing with this issue.
Any solutions for this please, maybe downgrade @react version or @react-navigation version?
"dependencies": { "react": "^15.4.2", "react-native": "0.43.3", "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.8" },
screen shot 2017-04-11 at 2 23 43 pm

minhhung2556 on 11 Apr 2017

same problem here

giangqaz on 14 Apr 2017

In case you are using react-navigation, make sure, you are using the master branch.

npm i --save react-community/react-navigation#master

With yarn, you have to add the master as well:

yarn add react-community/react-navigation#master

This is not an issue of the react-native project as those methods are deprecated for some time. The problem is caused by external libs/deps you're using...

dejakob on 15 Apr 2017

When you upgrade,it will upgrade react version too.now it is using react version 16.alpha. in 16 there is no pure-render-mixin.so you need to install it through npm.or you have to downgrade react version into 15.x.

Install these will fix the issue.

"react-addons-pure-render-mixin": "^15.5.0",
"react-static-container": "^1.0.1",

Chathula on 16 Apr 2017

👍3

@Chathula This helps one step ahead, thx :)

And continues then with
bundling: UnableToResolveError: Unable to resolve module react/lib/ReactComponentTreeHook from "/node_modules/react-native/Libraries/Performance/Systrace.js"

itinance on 16 Apr 2017

👍2

@itinance, can you post your package.json here?

What did u do? Downgrade or install those two packages?

Chathula on 16 Apr 2017

I'm using:

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

And it works for me, but when trying to increase to react alpha.6 or 7 it does not work.

theohdv on 25 Apr 2017

Oh sorry @Chathula, didn't get the notification. Thank you for reaching out.
This was the most recent version of package.json where we tried to bring up RN 0.43 without any success 10 days ago. Of course there happened further version updates in the meanwhile that are not recorded here because we stopped the upgrade and remained with 0.42 / 0.40 (two separate apps)

    "dependencies": {
        "apsl-react-native-button": "^3.0.2",
        "babel-plugin-idx": "^1.1.0",
        "bugsnag-react-native": "^2.2.0",
        "color": "^1.0.3",
        "color-convert": "^1.9.0",
        "d3-format": "https://github.com/d3/d3-format",
        "deepcopy": "^0.6.3",
        "idx": "^1.1.0",
        "immutable": "^3.8.1",
        "keymirror": "^0.1.1",
        "lodash.isequal": "^4.5.0",
        "lodash.trim": "^4.5.1",
        "lodash.uniqby": "^4.7.0",
        "lodash.uniqwith": "^4.5.0",
        "moment": "^2.17.1",
        "react": "16.0.0.-alpha.9",
        "react-addons-shallow-compare": "^15.4.2",
        "react-addons-pure-render-mixin": "^15.5.0",
        "react-static-container": "^1.0.1",
        "react-native": "0.43.2",
        "react-native-animatable": "^1.1.0",
        "react-native-busy-indicator": "^1.0.9",
        "react-native-checkbox": "^1.1.0",
        "react-native-collapsible": "^0.8.0",
        "react-native-datepicker": "^1.4.3",
        "react-native-device-info": "^0.9.9",
        "react-native-drawer": "^2.3.0",
        "react-native-extra-dimensions-android": "^0.20.1",
        "react-native-icon-badge": "^1.1.1",
        "react-native-ikon": "^0.1.2",
        "react-native-item-cell": "^1.6.0",
        "react-native-modalbox": "latest",
        "react-native-navbar": "^1.6.0",
        "react-native-parsed-text": "^0.0.16",
        "react-native-picker": "^4.0.18",
        "react-native-router-flux": "itinance/react-native-router-flux#c3bdac5a4cb850c049524385ffe84826ea77fb90",
        "react-native-side-menu": "^0.20.1",
        "react-native-simple-radio-button": "^2.5.0-alpha.1",
        "react-native-sqlite-storage": "^3.2.2",
        "react-native-swiper": "^1.5.4",
        "react-native-switch": "^1.0.5",
        "react-native-uuid-generator": "^2.0.0",
        "react-native-vector-icons": "^4.0.0",
        "react-native-version-number": "^0.1.1",
        "react-redux": "^5.0.2",
        "redux": "^3.6.0",
        "redux-form": "^6.5.0",
        "redux-logger": "^2.8.1",
        "redux-saga": "^0.14.3",
        "redux-thunk": "^2.2.0",
        "reselect": "^2.5.4",
        "rn-viewpager": "^1.1.4",
        "slim-formatter": "^1.0.6",
        "sprintf-js": "^1.0.3",
        "standard-http-error": "^2.0.0",
        "style-equal": "^1.0.0"
    },
    "devDependencies": {
        "babel-jest": "18.0.0",
        "babel-preset-react-native": "1.9.1",
        "jest": "18.1.0",
        "jest-react-native": "^18.0.0",
        "react-test-renderer": "15.4.2"
    },

itinance on 25 Apr 2017

@itinance have you tried with "react": "16.0.0.-alpha.3" instead of "react": "16.0.0.-alpha.9" ?

theohdv on 26 Apr 2017

🎉3 👍3

Recent experience suggests that until these things hit release, it’s probably best to stick with the exact versions specified as peerDependencies by react-native. Notice in package.json that react-native itself specifies exact versions, not ranges. Let your project dependency be "react": "16.0.0-alpha.$foo" according to the day’sreact-native`, not "^16.0.0-*".

I’m guessing that React (being alpha software) has a very unstable internal API right now.

haggholm on 26 Apr 2017

I try to use "react": "16.0.0.-alpha.3" and my error already disappear.
thank for @theohdv and @Chathula

ddwhan0123 on 13 May 2017

I've the same error!

jonathanroze on 18 Jul 2017

The issue was in our cases, that ReactComponentWithPureRenderMixin is required for instance by "react-addons-pure-render-mixin" this way:
module.exports = require('react/lib/ReactComponentWithPureRenderMixin');

But the path "node_modules/react/lib" was removed from 0.43.

react-addons-pure-render-mixin gots never being fixed for that.

react-native-router-flux V3 is based on react-native-navigation-experimental that will require itself the react-addons-pure-render-mixin wwhich requires the ReactComponentWithPureRenderMixin that is gone.

Unfortunately the react-native-router-flux goes deprecated recently while the V4-successor is still in beta and not working as a sucessor in all of our apps due to lag of backward compatibility and a lag of documentation (regarding Drawer for instance) or the approach to call scenes on actions like Actions.main().

some sources:

itinance on 18 Jul 2017

👍2

Thanks @theohdv.

Going with "react": "16.0.0.-alpha.3" instead of "react": "16.0.0.-alpha.6" did a trick.

amerdiglisic on 6 Aug 2017

Hi there! This issue is being closed because it has been inactive for a while. Maybe the issue has been fixed in a recent release, or perhaps it is not affecting a lot of people. Either way, we're automatically closing issues after a period of inactivity. Please do not take it personally!

If you think this issue should definitely remain open, please let us know. The following information is helpful when it comes to determining if the issue should be re-opened:

Does the issue still reproduce on the latest release candidate? Post a comment with the version you tested.
If so, is there any information missing from the bug report? Post a comment with all the information required by the issue template.
Is there a pull request that addresses this issue? Post a comment with the PR number so we can follow up.

If you would like to work on a patch to fix the issue, contributions are very welcome! Read through the contribution guide, and feel free to hop into #react-native if you need help planning your contribution.

pull-bot on 9 Oct 2017

😕2

I am stuck.
If I use
"react": "16.0.0" "react-native-router-flux": "3.37.0" "react-native": "^0.60.0"
I got this error which was the problem
Unable to resolve react/lib/ReactComponentWithPureRenderMixin" from ".//node_modules/react-native-router-flux/node_modules/react-addons-pure-render-mixin/index.js"
and
If I use
"react": "16.0.0.-alpha.3" "react-native-router-flux": "3.37.0" "react-native": "^0.52.0"
I get
Unable to resolve react-native/Libraries/Renderer/shims/ReactNativeBridgeEventPlugin" from ".//node_modules/react-native-gesture-handler/GestureHandler.js"`
Would you please help me? Thank you.

ITsolution-git on 20 Jan 2018

@ITsolution-git This setup is currently working for me.

"react": "16.0.0", "react-native": "0.51.0", "react-native-router-flux": "3.43.0"

ciriac on 21 Jan 2018

👍2 ❤1 😄1

@ciriac Thank you for your comment.

I am using expo stack>
And I installed versions you mentioned but expo says
`React Native version mismatch.

Javascript version: 0.51.0
Native version: 0.50.3`

Seems like expo supports up to only 0.50.3.
So here's my package.json
{
"name": "rankx-native",
"version": "0.1.0",
"private": true,
"devDependencies": {
"jest-expo": "23.0.0",
"react-native-scripts": "1.9.0",
"react-test-renderer": "16.0.0"
},
"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",
"scripts": {
"start": "react-native-scripts start",
"eject": "react-native-scripts eject",
"android": "react-native-scripts android",
"ios": "react-native-scripts ios",
"test": "node node_modules/jest/bin/jest.js --watch"
},
"jest": {
"preset": "jest-expo"
},
"dependencies": {
"apsl-react-native-button": "^3.1.0",
"color": "^2.0.1",
"create-react-class": "^15.6.2",
"expo": "^23.0.4",
"immutable": "^3.8.2",
"key-mirror": "^1.0.1",
"lodash": "^4.17.4",
"moment": "^2.20.1",
"native-base": "^2.3.7",
"prop-types": "^15.6.0",
"react": "16.0.0",
"react-addons-pure-render-mixin": "^15.5.0",
"react-mixin": "^4.0.0",
"react-native": "0.51.0",
"react-native-i18n": "^2.0.10",
"react-native-navbar": "^2.1.0",
"react-native-router-flux": "3.43.0",
"react-native-simple-store": "^1.3.0",
"react-native-simpledialog-android": "^1.0.9",
"react-native-vector-icons": "^4.5.0",
"react-navigation": "^1.0.0-beta.27",
"react-redux": "^5.0.6",
"react-static-container": "^1.0.2",
"react-timer-mixin": "^0.13.3",
"redux": "^3.7.2",
"redux-thunk": "^2.2.0",
"tcomb-form-native": "^0.6.11",
"underscore": "^1.8.3",
"validate.js": "^0.12.0"
}
}