Question

我正在使用Firebase Cloud Functions托管我的SSR Nextjs应用程序。我可以在Firebase云功能上部署Nextjs应用程序，并使用干净的URL来访问它，而无需使用React Hooks，但是使用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

This issue has also been reported here在GitHub firebase / firebase-functions存储库上。

还有一个reproducible example repo来测试错误（在pages/about.tsx文件中实现的useState挂钩）。

此操作已完成，React：16.10.2

Answer 1

从表面上看，问题源于React源代码的两个副本。我不是100％知道它是如何工作的，所以我什至不会尝试解释问题的根本原因。

要解决此问题，请将该应用放置在functions文件夹中，然后删除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'} })

React Hooks无法在Firebase Cloud Functions上运行错误：始终违规：无效的Hook调用

1 个答案: