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 6
Refs - &#34;object is not extensible&#34; hot 4
Warning: Unknown DOM property for. Did you mean htmlFor? hot 4
React@16.9 block `javascript:void(0);` hot 4
TypeError: Object(...) is not a function hot 3
Warning: validateDOMNesting(...): <tr> cannot appear as a child of <table> hot 3
React custom hook "Should have a queue. This is likely a bug in React" error message. hot 2
useEffect causes 'callback is not a function' exception hot 2
DevTools: Updating state or props in devtools does not trigger component update. hot 2
Infinite loop in useEffect using blank object or array hot 2
False-positive security precaution warning (`javascript:` URLs) hot 2
Hooks API - hook breaks when exported from module hot 2
Function components do not support contextType. hot 2
Feedback on useEffect depndencies change error hot 2
Should have a queue. This is likely a bug in React. Please file an issue hot 2
Github User Rank List