profile
viewpoint

Ask questionsInvariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component

<!-- Note: if the issue is about documentation or the website, please file it at: https://github.com/reactjs/reactjs.org/issues/new -->

Do you want to request a feature or report a bug?

Bug

What is the current behavior?

Root.js

import React from "react";
import { Provider } from "react-redux";
import { Navigator } from "./Navigation/Index";
import { store } from "./Store/Index";

export default class Root extends React.Component {
  render() {
    return (
      <Provider store={store}>
        <Navigator />
      </Provider>
    );
  }
}

Store.js

import ReduxThunk from "redux-thunk";
import { createStore, applyMiddleware, compose } from "redux";
import reducer from "../Reducers/index";

let composeEnhancers = compose;
/*  eslint no-undef: 0    */
if (__DEV__) {
  /*  eslint no-underscore-dangle: 0    */
  composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
}

const store = createStore(
  reducer,
  {},
  composeEnhancers(applyMiddleware(ReduxThunk))
);

export { store };

LoginScreen.js

import React, { Component } from "react";
import PhoneInput from "react-native-phone-input";
import { connect } from "react-redux";
import { View, StatusBar } from "react-native";
import { Container, Item, Input, Button, Text } from "native-base";
import {
  phoneChanged,
  codeChanged,
  onCodeDispatched,
  onPhoneLogin,
  clearAuth,
  onSignOut
} from "../Actions/AuthActions";
//import firebase from "react-native-firebase";
import { auth } from "../Config/firebase";

export class LoginScreen extends Component {
}

export default connect(
  null, // passing null just for testing
  null
)(LoginScreen);

package.json

 "dependencies": {
    "@babel/runtime": "^7.4.4",
    "firebase": "^5.11.1",
    "isomorphic-fetch": "^2.2.1",
    "native-base": "^2.12.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.6",
    "react-native": "0.57.5",
    "react-native-firebase": "^5.3.1",
    "react-native-gesture-handler": "^1.1.0",
    "react-native-otp-inputs": "^2.0.1",
    "react-native-phone-input": "^0.2.1",
    "react-navigation": "^3.9.1",
    "react-redux": "^7.0.3",
    "redux": "^4.0.1",
    "redux-immutable-state-invariant": "^2.1.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "babel-polyfill": "^6.26.0",
    "babel-preset-expo": "^5.0.0",
    "eslint-plugin-react-hooks": "^1.6.0",
    "expo": "^32.0.6"
  },

Code Base

https://codesandbox.io/s/github/codeshaker/HomeClub/tree/master/FrontEnd/HomeClubUI

What is the expected behavior?

I am getting Error when trying to connect my LoginScreen Component with Redux Store using connect() Function of Store. For testing purpose i am passing null for both parameters but getting the same errors always.

I am not able to debug when its causing this error. I am not breaking any of:

You might have mismatching versions of React and the renderer (such as React DOM)
You might be breaking the Rules of Hooks
You might have more than one copy of React in the same app

Which versions of React, and which browser / OS are affected by this issue? Did this work in previous versions of React?

facebook/react

Answer questions dotansimha

We had a very similar issue in https://github.com/dotansimha/graphql-code-generator . I found out that this caused it in our case:

We are using Yarn Workspaces for monorepo, and we had the following structure:

packages/
  - a <- Part of the workspace, NodeJS library
  - b <- Part of the workspace, NodeJS library
  - c <- Part of the workspace, NodeJS library
  - website <- NOT Part of the workspace, and has a dependency for React
     - live-demo <- Part of the workspace, React app

The website dir is not part of the workspace, but when trying to run live-demo, it causes the same error you're having. If I add website to the Workspace, it seems to work. If I remove manually website/node_modules/react and website/node_modules/react-dom - everything works.

So basically, something causes React to think that there are 2 different copies of React/ReactDOM (as mentioned in the error).

useful!

Related questions

Disable react strict mode on third party libraries hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 2
Warning: Unknown DOM property for. Did you mean htmlFor? hot 2
React@16.9 block `javascript:void(0);` hot 2
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 1
TypeError: Object(...) is not a function hot 1
useEffect causes 'callback is not a function' exception hot 1
DevTools: Updating state or props in devtools does not trigger component update. hot 1
eslint-plugin-react-hooks v2.0.0 is not loaded correctly. hot 1
Old references retained by memoizedProps in fiber hot 1
Stale values for useState inside callback functions hot 1
ReactDomServer - renderToString Failing with Context Provider on IE11 hot 1
Keep getting `TypeError: Cannot read property 'scrollTop' of null` in a custom hook... hot 1
Route based code splitting, Loading chunk 0 failed after new deployment hot 1
map through connected component, get data of last saga call within all componenets hot 1
Github User Rank List