NextJS使用@reonomy/react-confetti-explosion报Invalid Hook Call错误如何解决

该报错由@reonomy/react-confetti-explosion依赖内部调用React Hook触发规则校验导致，结合你的使用场景，大概率是以下三个原因之一：

• 项目React版本低于该依赖要求的最低版本（React >= 16.8.0），两者版本不匹配
• 项目中存在多份React副本，依赖和项目主代码调用的不是同一个React实例
• Next.js服务端渲染（SSR）阶段调用了仅支持客户端运行的Hook，触发校验异常

1. 校验React版本匹配度
   执行命令查看当前项目React版本：

   npm ls react
   # 用yarn的话执行 yarn list react
   

   如果版本低于16.8.0，升级项目React和ReactDOM到16.8.0以上的稳定版本即可。
2. 排查多React副本问题
   执行上一步的版本查询命令后，如果输出中出现多个不同版本的React实例，说明存在重复安装，按以下方式修复：
   • 在package.json中新增resolutions字段固定React版本：

   "resolutions": {
     "react": "^你当前项目使用的React版本号",
     "react-dom": "^你当前项目使用的ReactDOM版本号"
   }
   

   • 删除项目的node_modules文件夹和锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml），重新执行依赖安装命令。
3. SSR兼容处理
   如果以上两步都未解决问题，说明是Next.js SSR环境导致的异常，将组件改为关闭SSR的动态导入即可：

   // 替换原来的静态导入语句
   import dynamic from 'next/dynamic'
   const ConfettiExplosion = dynamic(() => import('@reonomy/react-confetti-explosion'), {
     ssr: false
   })
   

   该组件为纯客户端交互组件，关闭SSR不会影响功能，同时可以规避服务端渲染阶段的Hook调用异常。

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