使用styled-components封装motion.div时出现Hook无效调用错误怎么办

排查解决步骤 #

• 先校验是否存在多React实例冲突，执行npm ls react，如果输出多个版本的React，删除node_modules文件夹和package-lock.json/yarn.lock文件后重新执行npm install/yarn install即可，多实例是Hook写法合规依旧报错的最常见原因。
• 检查AccountBox的调用方式，确认是作为组件使用<AccountBox />而非作为普通函数调用AccountBox()，后者会直接触发非法Hook调用报错。
• 检查未贴出的关联代码：
  • 确认LoginForm、SignupForm内部的Hook全部定义在组件顶层作用域，没有放在条件判断、循环、回调函数内部
  • 确认backdropVariants、expandingTransition如果使用了Hook，是定义在合法的组件顶层位置
  • 确认useState的导入语句正确：import { useState } from 'react'，没有导入路径错误
• 解决styled-components和framer-motion的兼容问题：
  • 如果你使用的是styled-components v5，搭配React 18会出现偶发Hook报错，升级到styled-components v6即可解决
  • 确认motion的导入语句正确：import { motion } from 'framer-motion'，导入错误会导致motion相关方法内部Hook调用位置异常

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