RN 0.43 upgrade error ReactComponentWithPureRenderMixin

[stefan0s]

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: -

[dulmandakh]

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.

[EnriqueDev]

Similar problem here

[dulmandakh]

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]

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

[stefan0s]

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

[minhhung2556]

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

[giangqaz]

same problem here

[dejakob]

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

[Chathula]

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

[itinance]

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

[Chathula]

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

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

[theohdv]

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.

[itinance]

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

[theohdv]

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

[haggholm]

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’s react-native`, not "^16.0.0-***".

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

[ddwhan0123]

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

[jonathanroze]

I've the same error!

[itinance]

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:

1. IMPORTANT: v4 beta release is ready (v3 is not supported anymore) aksonov/react-native-router-flux#1974 (comment)
2. Actions.{route} not defined for nested scenes aksonov/react-native-router-flux#2045

[amerdiglisic]

Thanks @theohdv.

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

[pull-bot]

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.

[ITsolution-git]

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.

[ciriac]

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

[ITsolution-git]

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

[ITsolution-git]

I have solved the issue
Just changing
"react-native-router-flux": "3.43.0"
from above package.json

Found the issue from the react-native-router-flux. Thanks.

[irwanayeah]

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

yes work for me too

[MMYT4431]

Run the following command and it will be solved-
yarn add react-addons-pure-render-mixin
this is manual step to add this module.