Invalid hook call error, but everything seems to be good

Viewed 10196

Hello guys that's the first time I'm asking a question right here, but i'm really running out of ideas on this ...

Uncaught Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: 1. You might have mismatching versions of React and the renderer (such as React DOM) 2. You might be breaking the Rules of Hooks 3. You might have more than one copy of React in the same app

For a React-native project running on React-native web, I want to run an init function in my component with the useEffect() hook. In order to get data from a local library that i've imported with yarn link (that library doesn't use react).

As you can se bellow my hook is in a functional component :

import React, { useEffect } from 'react';

import Premium from './Premium';

const Widget = () => {

  useEffect(() => {
    init();
  }, []);

  const init = async () => {
    console.log('working');
  };

  return (
    <Premium />
  );
};

export default Widget;

I've also check my versions of react and react-dom as it says here and I only got one copy of react / react-dom and react-native.

To be sure, i've checked this in two different ways as it says in the official documentation. ( Via npm ls react-native and also via console.log(window.React1 === window.React2); )

Here's my package.json :

  "scripts": {
    "lint": "./node_modules/.bin/eslint .",
    "test": "./node_modules/.bin/jest"
  },
  "dependencies": {
    "@react-native-community/async-storage": "^1.10.3"
  },
  "devDependencies": {
    "@babel/core": "7.9.6",
    "@poool/eslint-config": "0.0.1-alpha.3",
    "babel-eslint": "10.1.0",
    "babel-jest": "26.0.1",
    "enzyme": "3.11.0",
    "enzyme-adapter-react-16": "1.15.2",
    "eslint": "6.8.0",
    "eslint-config-standard": "14.1.1",
    "eslint-plugin-babel": "5.3.0",
    "eslint-plugin-import": "2.20.2",
    "eslint-plugin-node": "11.1.0",
    "eslint-plugin-promise": "4.2.1",
    "eslint-plugin-react": "7.20.0",
    "eslint-plugin-standard": "4.0.1",
    "jest": "26.0.1",
    "jest-canvas-mock": "1.1.0",
    "metro-react-native-babel-preset": "0.59.0",
    "react": "16.11.0",
    "react-dom": "16.11.0",
    "react-native": "0.62.2",
    "react-native-web": "0.12.2",
    "react-test-renderer": "16.9.0"
  }
}

Thanks for all ! And feel free to tell me if I did something wrong, that's the first time for me :)

2 Answers

I finally find an answer on my own, and I wasn't giving enough details about my problem.

The fact is that I had 2 node_modules :

  • one for my components (I'm working on a library).
  • one for an example app made for running my components via react-native for web.

To solve my issue I simply follow https://github.com/facebook/react/issues/13991#issuecomment-435587809 ( That i saw 10000 times), in order to point on the same React copy. And it worked perfectly !

Thanks for your comments !

I've noticed that this error also appears when you run react and react-dom twice in the browser. For example if it's bundled with the main application, but also bundled inside a plugin coming from npm.

In short running the react code twice in the browser will not work and can also lead to this confusing error.

Related