CODEWITHSUNDEEP
reactjsfirebasegoogle-cloud-functionsreact-hooksnext.js
ArchNoob
ArchNoob

Reputation: 4126

React Hooks won't work on Firebase Cloud Functions Error: Invariant Violation: Invalid hook call

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

Upvotes: 9

Views: 523

Answers (1)

Rahman Qureshi
Rahman Qureshi

Reputation: 11

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'} })

Upvotes: 1

Related Questions