CODEWITHSUNDEEP
react-nativereact-hooks
Tycholiz
Tycholiz

Reputation: 1200

React Native Multiple versions of React (when using hooks)

I've gone through the 3 main causes of the infamous invalid hook call warning, and have determined that I have multiple versions of React in my app. I've confirmed this by this step:

// Add this in node_modules/react-dom/index.js
window.React1 = require('react');

// Add this in your component file
require('react-dom');
window.React2 = require('react');
console.log(window.React1 === window.React2);

Based on my research, I understand that it is probably a dependency I have that is listing react as a dependency instead of a peer dependency, and that there are a few ways to solve this problem. However, I don't know how to figure out which package it is that is causing the issue.

There are lots of solutions online that are relevant to react (such as adding a webpack alias), but unfortunately are not for react-native. I have (perhaps naively) tried to add an alias with module-resolver to babel.config.js, but that did not work:

plugins: [
     [
          'module-resolver',
          {
              alias: path.resolve('node_modules/react'),
          },
     ],
]

Upvotes: 3

Views: 642

Answers (1)

Tycholiz
Tycholiz

Reputation: 1200

Figured this out after a long while. The issue was having react-dom library listed as a dependency. I'd read somewhere to do this to support jest testing, but I suppose that advice was dated.

Nonetheless the error was an obvious red herring, so hoping this can help someone out in the future

Upvotes: 2

Related Questions