Hook Error: Hooks can only be called inside the body of a function component

[rsokz]

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

What is the current behavior?
When using useState() hook in a functional component, I get the following error:

Hooks can only be called inside the body of a function component

If the current behavior is a bug, please provide the steps to reproduce and if possible a minimal demo of the problem.
The functional component where the hook is being used:

const AuthForm = () => {
  const [value, setValue] = useState(1);

  return (
    <Paper square>
      <Tabs
        value={value}
        indicatorColor="primary"
        textColor="primary"
        onChange={() => setValue(value)}
      >
        <Tab label="Active" />
        <Tab label="Active" />
      </Tabs>
    </Paper>
  );
};

package.json:

{
  "main": "index.js",
  "scripts": {
    "dev": "nodemon index.js --ignore client"
  },
  "dependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "@material-ui/core": "^3.9.2",
    "apollo-boost": "^0.1.27",
    "axios": "^0.18.0",
    "babel-loader": "^8.0.5",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.16.0",
    "connect-mongo": "^2.0.3",
    "express": "^4.16.4",
    "express-graphql": "^0.7.1",
    "express-session": "^1.15.6",
    "graphql": "^14.1.1",
    "html-webpack-plugin": "^3.2.0",
    "lodash": "^4.17.4",
    "mongoose": "^5.4.11",
    "passport": "^0.4.0",
    "passport-local": "^1.0.0",
    "react": "16.8.1",
    "react-apollo": "^2.4.1",
    "react-dom": "16.8.1",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "webpack": "^4.29.3",
    "webpack-dev-middleware": "^3.5.2"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-transform-react-jsx": "^7.3.0"
  }
}

What is the expected behavior?
App should run without any errors.

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

[gaearon]

Did you follow the link in the error message and read that page listing the common causes for it?

Which ones have you verified?

[rsokz]

Did you follow the link in the error message and read that page listing the common causes for it?

Which ones have you verified?

You might have mismatching versions of React and React DOM.

Verified: Both on 16.8.1

You might be breaking the Rules of Hooks.

Verified.

You might have more than one copy of React in the same app.

How can I verify this?

[rsokz]

The code works in a sandbox environment: https://codesandbox.io/s/5zj5o023vp (thanks @ryancogswell)

It seems as though the devDependencies in react-apollo have a mismatch (caught be @ryancogswell)

"react": "16.5.2", "react-dom": "16.8.1"

Line 134: https://github.com/apollographql/react-apollo/blob/master/package.json

Tracking issue: apollographql/react-apollo#2792

[threepointone]

That's likely the issue. Closing this one in favour of the one on react-apollo, cheers.

[gaearon]

How can I verify this?

The page answers that too.

https://reactjs.org/warnings/invalid-hook-call-warning.html#duplicate-react