React Hooks 不适用于 Firebase Cloud Functions 错误：不变违规：无效的钩子调用

Posted 2023-02-22

【中文标题】React Hooks 不适用于 Firebase Cloud Functions 错误：不变违规：无效的钩子调用

【英文标题】：React Hooks won't work on Firebase Cloud Functions Error: Invariant Violation: Invalid hook call

【发布时间】：2020-02-16 06:31:14

【问题描述】：

我正在使用 Firebase Cloud Functions 来托管我的 s-s-r 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

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

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

这是在 React: 16.10.2 上完成的

【问题讨论】：

我目前正在开发 Next.js 应用程序，该应用程序使用 Hooks 并且需要部署到 Firebase，所以如果我能做到这一点且没有错误，我会及时通知您 :)

@RomanBatsenko，这个firebase gcp nextjs setup 为我工作？？？？我没有发布答案，因为我没有花时间弄清楚是什么真正导致了其他设置中的错误。我认为这将是 gcp 示例中 babel 的存在，仅此而已。如果您想出一个可行的解释，请更新我们的答案！

哇，太棒了！ ????好的，如果我弄清楚发生了什么，我会写在这里

【参考方案1】：

问题表面上源于 react 源代码的两个副本。我不是 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' )

【讨论】：

感谢您的回答，实际上我并不真正支持将应用程序耦合到函数目录中的想法，但我会研究您提出的这个解决方案:-)

仅供参考，作者回复说他有一个新的示例 repo here。就您而言，除非您深入研究反应代码，否则似乎根本不可能将两者分开，因为您需要相同的反应源和 node_modules 文件夹。作者的例子也有同样的问题。我不知道它是否提供任何其他优势。如果有的话，它会进一步纠缠firebase和应用程序，所以我不会使用它。