Server Error Error: Invalid hook call.

[jeverhart383]

Server Error Error: Invalid hook call.

[jayanth-kumar-morem]

@mcmwebsol
It appears that you have two different versions of React in your project. You have React v17.0.2 and React v18.2.0 installed. This can cause the "Invalid hook call" error you're encountering.

[mcmwebsol]

Okay, but how to do I fix that? I haven't added anything to this project.

[JEverhart383]

@mcmwebsol what version of node/npm are you using? Might be worth trying to update

[mcmwebsol]

I was using npm 6.14.6 and node 12.18.4
I upgraded to npm 9.5.0 and node 18.15.0

Now I get a different error though:

warn - ./node_modules/next/dist/pages/_error.js
There are multiple modules with names that only differ in casing.
This can lead to unexpected behavior when compiling on a filesystem with other case-semantic.
Use equal casing. Compare these module identifiers:

• c:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[2].oneOf[2].use!C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\next\dist\pages_error.js
• c:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\next\dist\build\webpack\loaders\next-swc-loader.js??ruleSet[1].rules[2].oneOf[2].use!c:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\next\dist\pages_error.js
  error - ApolloError: Response not successful: Received status code 405
  at new ApolloError (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\errors\errors.cjs:34:28)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\core\core.cjs:1853:19
  at both (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1068:53)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1061:72
  at new Promise ()
  at Object.then (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1061:24)
  at Object.error (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1069:49)
  at notifySubscription (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:140:18)
  at onNotify (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:179:3)
  at SubscriptionObserver.error (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:240:7) {
  graphQLErrors: [],
  clientErrors: [],
  networkError: Error [ServerError]: Response not successful: Received status code 405
  at Object.throwServerError (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\utils\utils.cjs:45:17)
  at parseJsonBody (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\http\http.cjs:275:15)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\http\http.cjs:311:48
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  response: Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: [Object],
  [Symbol(headers)]: [HeadersList]
  },
  statusCode: 405,
  result: '<style data-next-hide-fouc="true">body{display:none}</style><style>body{display:block}</style><title>405: Method Not Allowed</title><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1681228797120"></script><script src="/_next/static/chunks/webpack.js?ts=1681228797120" defer=""></script><script src="/_next/static/chunks/main.js?ts=1681228797120" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1681228797120" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1681228797120" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1681228797120" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1681228797120" defer=""></script>
  <style>\n' +
  ' body { margin: 0; color: #000; background: #fff; }\n' +
  ' .next-error-h1 {\n' +
  ' border-right: 1px solid rgba(0, 0, 0, .3);\n' +
  ' }\n' +
  '\n' +
  ' @media (prefers-color-scheme: dark) {\n' +
  ' body { color: #fff; background: #000; }\n' +
  ' .next-error-h1 {\n' +
  ' border-right: 1px solid rgba(255, 255, 255, .3);\n' +
  ' }\n' +
  ' }</style>

  405

  Method Not Allowed.

  <script src="/_next/static/chunks/react-refresh.js?ts=1681228797120"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":405}},"page":"/_error","query":{},"buildId":"development","isFallback":false,"gip":true,"locales":["en"],"scriptLoader":[]}</script>'
  },
  extraInfo: undefined,
  page: '/'
  }
  error - ApolloError: Response not successful: Received status code 405
  at new ApolloError (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\errors\errors.cjs:34:28)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\core\core.cjs:1853:19
  at both (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1068:53)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1061:72
  at new Promise ()
  at Object.then (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1061:24)
  at Object.error (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\utilities\utilities.cjs:1069:49)
  at notifySubscription (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:140:18)
  at onNotify (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:179:3)
  at SubscriptionObserver.error (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules\zen-observable\lib\Observable.js:240:7) {
  graphQLErrors: [],
  clientErrors: [],
  networkError: Error [ServerError]: Response not successful: Received status code 405
  at Object.throwServerError (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\utils\utils.cjs:45:17)
  at parseJsonBody (C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\http\http.cjs:275:15)
  at C:\Users\xyz\Downloads\first-headless-project-decode-2023-main\node_modules@apollo\client\link\http\http.cjs:311:48
  at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  response: Response {
  [Symbol(realm)]: null,
  [Symbol(state)]: [Object],
  [Symbol(headers)]: [HeadersList]
  },
  statusCode: 405,
  result: '<style data-next-hide-fouc="true">body{display:none}</style><style>body{display:block}</style><title>405: Method Not Allowed</title><script defer="" nomodule="" src="/_next/static/chunks/polyfills.js?ts=1681228798344"></script><script src="/_next/static/chunks/webpack.js?ts=1681228798344" defer=""></script><script src="/_next/static/chunks/main.js?ts=1681228798344" defer=""></script><script src="/_next/static/chunks/pages/_app.js?ts=1681228798344" defer=""></script><script src="/_next/static/chunks/pages/_error.js?ts=1681228798344" defer=""></script><script src="/_next/static/development/_buildManifest.js?ts=1681228798344" defer=""></script><script src="/_next/static/development/_ssgManifest.js?ts=1681228798344" defer=""></script>
  <style>\n' +
  ' body { margin: 0; color: #000; background: #fff; }\n' +
  ' .next-error-h1 {\n' +
  ' border-right: 1px solid rgba(0, 0, 0, .3);\n' +
  ' }\n' +
  '\n' +
  ' @media (prefers-color-scheme: dark) {\n' +
  ' body { color: #fff; background: #000; }\n' +
  ' .next-error-h1 {\n' +
  ' border-right: 1px solid rgba(255, 255, 255, .3);\n' +
  ' }\n' +
  ' }</style>

  405

  Method Not Allowed.

  <script src="/_next/static/chunks/react-refresh.js?ts=1681228798344"></script><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{"statusCode":405}},"page":"/_error","query":{},"buildId":"development","isFallback":false,"gip":true,"locales":["en"],"scriptLoader":[]}</script>'
  },
  extraInfo: undefined,
  page: '/[...wordpressNode]'
  }

Thanks

[JEverhart383]

@mcmwebsol I was able to find a few similar error reports in the Next.js repo:
vercel/next.js#10739
vercel/next.js#32034

I'm not sure if that will help, but it seems like there are some issues with drive letter casing in the second discussion. I know we've had people use Faust successfully on Windows, so if you can share any details on what command prompt you're using, maybe we can shape this into some suggestions for Windows users.