NextJS（React）：使用Tamagui Takeout时_document.tsx中出现Invalid hook call/useState错误求助

大家好，我最近用Tamagui Takeout starter搭NextJS项目时碰到个棘手问题，现在每次跑yarn web或者yarn dev必出SSR错误，卡了好一阵实在没辙，想请教下各位有没有类似经历或者能帮我排查下问题出在哪🥺

环境信息 #

• 基于Tamagui Takeout starter脚手架搭建
• React版本：18.3.1（已经用yarn why react确认整个项目所有依赖都是这个版本，没有多版本冲突）

问题详情 #

现在只要访问/sign-in这类页面，SSR阶段就会抛出错误：

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component.
[TypeError: Cannot read properties of null (reading 'useState')]

堆栈追踪直接指向我_document.tsx里的这行代码：

const { getStyleElement } = AppRegistry.getApplication('Main', () => <Main />);

已尝试的排查/修复步骤 #

我已经折腾了好几种方法，但问题还是没解决：

1. 确认单一React版本：执行yarn why react检查，所有依赖都统一在react@18.3.1，完全没有版本不一致的情况
2. 彻底清理重装依赖：删了node_modules、yarn.lock和.next文件夹，重新yarn install，问题依旧
3. 检查_document.tsx的样式加载顺序：确保Tamagui的CSS样式在正确位置加载：

   const styles = [
     <style key="tamagui-css" dangerouslySetInnerHTML={{ __html: config.getCSS() }} />,
   ]
   

4. 检查本地包的依赖设置：确认项目里的本地包都没有直接依赖React，只把它作为peerDependency引入
5. 排除配置冲突：next.config.js里没有冲突的路径别名，也没自定义Webpack配置
6. 测试React基础功能：专门在/pages/test-react.tsx里写了useState的测试代码，完全能正常工作
7. 临时注释AppRegistry代码：把AppRegistry.getApplication(...)暂时注释掉，错误就消失了，但这样Tamagui的样式就彻底乱了，根本没法用

求助请求 #

如果有谁遇到过同样的问题，或者能帮我分析下我哪里操作错了，我真的超级感激！

内容来源于stack exchange