我正在使用 Firebase Cloud Functions 来托管我的 SSR Nextjs 应用。我可以在Firebase云函数上部署Nextjs应用程序,并使用没有React Hooks的干净URL访问它,但是使用React Hooks,我收到一条错误消息:
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
此问题也已在 GitHub firebase/firebase-functions 存储库中报告。
还有一个可重现的示例存储库来测试错误(useState hook 在 pages/about.tsx 文件中实现(。
这是在, 反应: 16.10.2
这个问题表面上源于反应源代码的两个副本。我不是 100% 确定它是如何工作的,所以我什至不会尝试解释问题的根本原因。
要解决此问题,请将应用程序放在函数文件夹中并删除package.json。不幸的是,应用程序的所有依赖项都必须是函数的依赖项。然后,next.config.js
更改为:
'use strict';
module.exports = { distDir: './next' };
并index.js
这一点:
const dir = __dirname + "/app" const app = next({ dev, dir, conf: {distDir: 'next'} })