React SSR集成react-ssr-adsense出现Invalid hook call错误如何解决

你遇到的Invalid hook call错误核心原因是项目中存在多份React DOM副本，同时部分旧依赖对React DOM版本的要求和你当前使用的17.0.2不匹配。

先给你解读npm ls react-dom的输出：

• 你当前有两个React DOM 17.0.2副本：一份是你项目根依赖声明的版本，另一份是安装react-ssr-adsense时自动安装的子依赖版本
• 三个peer依赖缺失报错是因为@material-ui/icons@4.9.1、material-auto-rotating-carousel@3.0.2、react-hot-loader@4.12.20这三个包仅支持React DOM 16.x版本，和你当前用的17.x不兼容

解决步骤 #

第一步：消除多React DOM副本（优先解决，直接修复hook错误） #

1. 打开项目根目录的package.json，确认dependencies中明确声明了react和react-dom的版本均为17.0.2
2. 在项目根目录新建.npmrc文件，添加以下内容：

legacy-peer-deps=true

这个配置会强制npm优先使用你在根目录声明的依赖版本，忽略子依赖的peer依赖要求，不会为react-ssr-adsense单独安装额外的React DOM副本
3. 删除项目根目录的node_modules文件夹和package-lock.json文件
4. 重新执行npm install安装所有依赖
5. 安装完成后再次执行npm ls react-dom验证，此时只会显示根目录的一份react-dom@17.0.2，不会再出现react-ssr-adsense下的子依赖副本

第二步：验证hook错误 #

重启SSR应用，访问带AdSense组件的页面，Invalid hook call错误会直接消失。

第三步：兜底方案（如上述操作后仍有问题） #

直接弃用react-ssr-adsense第三方包，手写无额外依赖的SSR兼容AdSense组件，完全规避依赖冲突：

1. 保留template.js中head区域的AdSense脚本
2. 新建自定义AdSense组件：

import { useEffect } from 'react'

const CustomAdSense = ({
  client,
  slot,
  style = { display: 'block' },
  format = 'auto',
  responsive = 'true',
  layoutKey
}) => {
  // 客户端hydrate完成后再初始化广告
  useEffect(() => {
    try {
      (window.adsbygoogle = window.adsbygoogle || []).push({})
    } catch (err) {}
  }, [])

  return (
    <ins
      className="adsbygoogle"
      style={style}
      data-ad-client={client}
      data-ad-slot={slot}
      data-ad-format={format}
      data-full-width-responsive={responsive}
      data-ad-layout-key={layoutKey}
    />
  )
}

export default CustomAdSense

3. 替换原有引用，直接使用自定义组件即可，功能和第三方包完全一致，无依赖冲突。

可选：解决剩余peer依赖警告 #

如果你想要消除剩下的peer依赖报错，可选择以下两种方案之一：

• 升级@material-ui/icons、material-auto-rotating-carousel、react-hot-loader到支持React 17的版本，其中React 17已原生支持Fast Refresh，可直接移除react-hot-loader依赖，不需要再使用
• 降低项目根目录的React和React DOM版本到16.14.0，兼容所有旧依赖的版本要求

内容的提问来源于stack exchange，提问作者j-terranova