安装Gatsby插件后站点崩溃，出现Invalid hook call错误

我来帮你捋捋这个问题——你遇到的Error: Invalid hook call确实是React Hooks使用里的高频坑，结合你给出的操作步骤和依赖树，咱们一步步拆解：

问题重现 #

你执行的操作流程：

• 全局安装Gatsby CLI：npm install -g gatsby-cli
• 创建新Gatsby项目：gatsby new my-app
• 启动开发服务：gatsby develop
• 安装Gatsby官方插件后触发错误，错误信息如下：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.
可能原因：React与渲染器（如React DOM）版本不匹配；违反Hooks使用规则；应用中存在多个React副本。

依赖树初步分析 #

从你提供的依赖树来看：

├─┬ gatsby@2.23.10 
│ └─┬ gatsby-cli@2.12.50 
│ └── react@16.13.1 deduped 
└── react@16.13.1

这里的deduped说明npm已经自动去重了React，当前项目里理论上只有一份react@16.13.1，但还是要警惕几个隐藏问题：

针对性解决方案 #

1. 确认React与React DOM版本完全匹配

Hooks对React和React DOM的版本一致性要求极高，哪怕小版本不一致都可能触发错误。执行以下命令检查：

npm list react react-dom

如果输出里两个包的版本不一致，比如React是16.13.1但React DOM是16.12.0，就需要强制统一版本：
在package.json中添加resolutions字段（npm v7+直接支持，低版本npm可以用npm-force-resolutions工具）：

"resolutions": {
  "react": "16.13.1",
  "react-dom": "16.13.1"
}

然后重新执行npm install。

2. 排查Hooks使用是否合规

仔细检查你自己的代码或者新安装的插件代码：

• 所有Hooks（比如useState、useEffect）必须在函数组件的顶层作用域调用，绝对不能放在循环、条件判断、嵌套函数里
• 确认安装的Gatsby插件是支持React Hooks的版本，有些老旧插件可能还在使用类组件或者不符合Hooks规则的写法

3. 清理Gatsby缓存

Gatsby的缓存有时候会残留旧的依赖信息，执行以下命令清除缓存后重启服务：

gatsby clean
gatsby develop

4. 避免全局与本地CLI版本冲突

你全局安装的gatsby-cli@2.12.50和项目依赖的gatsby@2.23.10可能存在版本不兼容的情况，建议改用项目本地的CLI执行命令：

npx gatsby develop

如果问题解决，可以考虑卸载全局CLI：npm uninstall -g gatsby-cli，以后统一用npx调用本地版本。

内容的提问来源于stack exchange，提问作者paddydev