Error: Invalid hook call. Hooks can only be called inside of the body...

[itsdarrylnorris]

Problem:

I started porting over this example project into another project that I am currently working and it looks like the authentication with Github seems to be working. However, whenever I am trying to visit the / page after been authenticate, I am getting this error:

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
See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.

Here is how my package.json looks like:

{
  "name": "nextjs-passport-session-auth",
  "version": "1.0.0",
  "private": true,
  "description": "Example of a Next.js application with api routes that enable passport.js authentication and cookie sessions.",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  },
  "devDependencies": {
    "@now/node": "^1.4.1",
    "@types/node": "^12.0.2",
    "@typescript-eslint/eslint-plugin": "^1.9.0",
    "@typescript-eslint/parser": "^1.9.0",
    "eslint": "^5.16.0",
    "typescript": "^3.6.4"
  },
  "dependencies": {
    "@fortawesome/fontawesome": "^1.1.8",
    "@fortawesome/fontawesome-free": "^5.12.1",
    "@fortawesome/fontawesome-svg-core": "^1.2.27",
    "@fortawesome/free-brands-svg-icons": "^5.12.1",
    "@fortawesome/free-regular-svg-icons": "^5.12.1",
    "@fortawesome/free-solid-svg-icons": "^5.12.1",
    "@fortawesome/react-fontawesome": "^0.1.9",
    "@now/next": "^2.3.13",
    "@types/cookie-session": "^2.0.37",
    "@types/mongodb": "^3.3.16",
    "@types/passport-github": "^1.1.5",
    "@types/react": "^16.9.19",
    "@types/react-facebook-login": "^4.1.1",
    "bootstrap-scss": "4.4.1",
    "cookie-session": "^1.4.0",
    "eslint-plugin-react-hooks": "^2.5.0",
    "feather-icons": "^4.26.0",
    "fontawesome": "^5.6.3",
    "isomorphic-fetch": "^2.2.1",
    "isomorphic-unfetch": "^3.0.0",
    "js-cookie": "^2.2.1",
    "micro": "^9.3.4",
    "micro-compose": "^0.0.3",
    "micro-cookie": "^1.2.0",
    "micro-redirect": "^1.0.2",
    "mongodb": "^3.5.4",
    "next": "^9.3.0",
    "next-cookies": "^1.1.3",
    "node-sass": "^4.13.1",
    "now": "^17.0.4",
    "passport": "^0.4.0",
    "passport-github": "^1.1.0",
    "react": "^16.12.0",
    "react-bootstrap": "^1.0.0-beta.17",
    "react-dom": "^16.12.0",
    "react-facebook-login": "^4.1.1",
    "react-google-login": "^5.1.1",
    "react-social-login-buttons": "^3.0.0"
  }
}

It looks like is failing whenever I am calling useIdentity().

Have anyone ran into this particular issue?

[andycmaj]

hmm works with the yarn.lock currently in master... i'll update to your react/next versions and see what's what.

[andycmaj]

ah you are using eslint-plugin-react-hooks.
what's your eslint config look like @itsdarrylnorris ?

[andycmaj]

actually maybe just your whole repo :)
can't repro this on my own

[itsdarrylnorris]

Hey @andycmaj ,

I cannot share the whole repo, but I can add more details. It looks like it's something wrong with my project. I tried to reproduce the issue by updating the libs on a clone of this project and I am not able to reproduce it either.

Here are few configuration files:

.eslintrc.js

module.exports = {
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint', 'react-hooks'],
  extends: [
    'plugin:@typescript-eslint/recommended',
    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and displays prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
  ],
  rules: {
    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
    '@typescript-eslint/explicit-function-return-type': 'off',
    '@typescript-eslint/indent': ['error', 2],
    '@typescript-eslint/no-explicit-any': 'off',
    '@typescript-eslint/interface-name-prefix': 'off',
    'prettier/prettier': 'off',
    'react-hooks/rules-of-hooks': 'error',
    'react-hooks/exhaustive-deps': 'warn',
  },
}

tsconfig.json

{
  "compilerOptions": {
    "allowJs": true,
    "allowSyntheticDefaultImports": true,
    "jsx": "preserve",
    "lib": ["dom", "es2017"],
    "module": "esnext",
    "moduleResolution": "node",
    "noEmit": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "preserveConstEnums": true,
    "removeComments": false,
    "skipLibCheck": true,
    "sourceMap": true,
    "strict": true,
    "target": "esnext",
    "typeRoots": ["./node_modules/@types"],
    "forceConsistentCasingInFileNames": true,
    "esModuleInterop": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noFallthroughCasesInSwitch": true,
    "alwaysStrict": true
  },
  "exclude": ["node_modules"],
  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"]
}

In my project, I have now.json, I am not sure if ping the version matter or not.

{
  "version": 2,
  "env": {
    "vars": "@vars"
  }
}

.babelrc

{
  "presets": ["next/babel"]
}

I am going to spend sometime right now on this. If you have any tips or something that might cause this issue let me know I will appreciated.

[itsdarrylnorris]

Hey @andycmaj ,

I figure out the problem. The issue was related to the success location page, I changed the route to be a route under /api/user/, and this was throwing an error because I was returning a component instead of an API route.

Moving the page out of the /api fixed my issue.

Closing this issue.