Menu
I am using Firebase Cloud Functions to host my SSR Nextjs app. I can deploy the Nextjs app on firebase cloud functions and access it with clean URLs without React Hooks but with React Hooks I get an error message:
Invariant Violation: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
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
This issue has also been reported here on a GitHub firebase/firebase-functions repo.
There is also a reproducible example repo to test the bug (useState hook implemented in pages/about.tsx file).
This is done on, React: 16.10.2
378
This problem can also come up when you use npm link or an equivalent. In that case, your bundler might “see” two Reacts — one in application folder and one in your library folder. Assuming myapp and mylib are sibling folders, one possible fix is to run npm link ../myapp/node_modules/react from mylib .
If the error persists, try to delete your node_modules and package-lock. json (not package. json ) files, re-run npm install and restart your IDE. The error is often caused by having multiple versions of react in the same project.
This could happen for one of the following reasons: 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 See for tips about how to debug and fix this problem.
The rules of React Hooks clearly state: Don't call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function. React Hooks need to be called in the same order each time the component renders.
The problem superficially stems from two copies of the react source code. I'm not 100% sure how it works so I won't even try to explain the root cause of the problem.
To fix the problem, please place the app inside the functions folder and remove package.json. Unfortunately, all the dependencies of app must necessarily be dependencies of functions. Then, change next.config.js to this:
'use strict';
module.exports = { distDir: './next' };
and index.js to this:
const dir = __dirname + "/app" const app = next({ dev, dir, conf: {distDir: 'next'} })
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
