Invalid hook call error in Next.js v10 with React v17

[elite0226]

What version of Next.js are you using?

10.1.3

What version of Node.js are you using?

14.7.0

What browser are you using?

Chrome

What operating system are you using?

macOS

How are you deploying your application?

Vercel

Describe the Bug

Recently, I've upgraded all dependencies to the latest versions including Next.js and React.

Once I upgraded, some pages run into Invalid Hook call error. Similar issues were reported on both React and Next.js repos but none of them works for me.

So I ended up with downgrading the React version to 16.14.0 and it's working well but I'd like to use the features of React v17 with Next.js v10.

Expected Behavior

No errors with the latest versions of dependencies.

To Reproduce

Here are the dependencies I have used:

"dependencies": {
    "@emotion/babel-preset-css-prop": "^10.0.27",
    "@emotion/core": "^10.0.28",
    "@emotion/react": "^11.1.5",
    "@emotion/styled": "^10.0.27",
    "@fullstory/babel-plugin-annotate-react": "^1.0.2",
    "@next/bundle-analyzer": "^9.4.2",
    "@tanem/react-nprogress": "^3.0.64",
    "body-scroll-lock": "^3.0.2",
    "date-fns": "^2.14.0",
    "debug": "^4.1.1",
    "fast-deep-equal": "^3.1.3",
    "favicons": "^6.1.0",
    "focus-trap": "^5.1.0",
    "focus-visible": "^5.1.0",
    "intersection-observer": "^0.10.0",
    "lscache": "^1.3.0",
    "next": "^10.1.3",
    "node-fetch": "^2.6.0",
    "nookies": "^2.4.0",
    "puppeteer": "^3.1.0",
    "puppeteer-cluster": "^0.20.0",
    "query-string": "^6.13.1",
    "react": "^17.0.2",
    "react-cookie": "^4.0.3",
    "react-dom": "^17.0.2",
    "react-error-boundary": "^2.3.1",
    "react-id-swiper": "^3.0.0",
    "react-markdown": "^4.3.1",
    "react-modal": "^3.13.1",
    "react-transition-group": "^4.4.1",
    "schema-dts": "^0.6.0",
    "smoothscroll-polyfill": "^0.4.4",
    "svg-sprite": "^1.5.0",
    "swiper": "^5.4.2",
    "swr": "^0.2.0"
  },
  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/node": "^7.8.7",
    "@babel/plugin-transform-react-pure-annotations": "^7.10.4",
    "@storybook/addon-a11y": "^6.2.9",
    "@storybook/addon-actions": "^6.2.9",
    "@storybook/addon-knobs": "^6.2.9",
    "@storybook/addon-links": "^6.2.9",
    "@storybook/addon-viewport": "^6.2.9",
    "@storybook/addons": "^6.2.9",
    "@storybook/api": "^6.2.9",
    "@storybook/components": "^6.2.9",
    "@storybook/preset-typescript": "^3.0.0",
    "@storybook/react": "^6.2.9",
    "@svgr/webpack": "^5.4.0",
    "@testing-library/jest-dom": "^5.4.0",
    "@testing-library/react": "^10.0.2",
    "@testing-library/react-hooks": "^3.2.1",
    "@types/body-scroll-lock": "^2.6.1",
    "@types/css-font-loading-module": "^0.0.4",
    "@types/googlemaps": "^3.39.3",
    "@types/grecaptcha": "^3.0.1",
    "@types/lscache": "^1.3.0",
    "@types/node": "^13.11.0",
    "@types/node-fetch": "^2.5.6",
    "@types/nprogress": "^0.2.0",
    "@types/react": "^17.0.3",
    "@types/react-dom": "^17.0.3",
    "@types/react-modal": "^3.10.5",
    "@types/react-svg-inline": "^2.1.1",
    "@types/react-transition-group": "^4.2.4",
    "@types/smoothscroll-polyfill": "^0.3.1",
    "@types/youtube": "^0.0.39",
    "@typescript-eslint/eslint-plugin": "^4.4.0",
    "@typescript-eslint/parser": "^4.4.0",
    "add": "^2.0.6",
    "babel-loader": "^8.1.0",
    "babel-plugin-dynamic-import-node": "^2.3.3",
    "babel-plugin-emotion": "^10.0.33",
    "cypress": "^5.1.0",
    "cypress-wait-until": "^1.7.1",
    "eslint": "^6.8.0",
    "eslint-config-prettier": "^6.10.1",
    "eslint-import-resolver-typescript": "^2.0.0",
    "eslint-plugin-cypress": "^2.11.1",
    "eslint-plugin-jest": "^23.8.2",
    "eslint-plugin-jest-formatting": "^1.2.0",
    "eslint-plugin-prettier": "^3.1.2",
    "eslint-plugin-react": "^7.19.0",
    "eslint-plugin-react-hooks": "^4.2.0",
    "eslint-plugin-typescript-sort-keys": "^0.8.0",
    "fork-ts-checker-webpack-plugin": "^4.1.2",
    "import-sort": "^6.0.0",
    "import-sort-style-wes": "^3.0.2",
    "jest": "^26.6.3",
    "jest-next-dynamic": "^1.0.1",
    "jest-raw-loader": "^1.0.1",
    "prettier": "^2.0.4",
    "prettier-plugin-import-sort": "^0.0.4",
    "react-svg-inline": "^2.1.1",
    "react-test-renderer": "^17.0.2",
    "start-server-and-test": "^1.11.3",
    "storybook-addon-designs": "^5.4.5",
    "storybook-mobile": "^0.1.31",
    "ts-jest": "^25.3.1",
    "ts-loader": "^6.2.2",
    "typescript": "^4.0.3",
    "yarn": "^1.22.4"
  },

and here is the screenshot of an error:

[mschilde]

I had a similar issue, after upgrading to Jest v27 I suddenly got invalid hook usage errors.

In my case the problem turned out to be my usage of jest.isolateModules, I was requiring the component in each test. Example:

it('should display the menu item', () => {
  jest.isolateModules(() => {
    module = require('../../../../components/layout/header/X'); // this line is problematic
    const component = render(
      <module.X />,
      {}
    );
    expect(component.queryByText('Home')).toBeTruthy();
  });
});

I refactored the tests and mocks to require the component in beforeEach and things started working again.