Next.js + Chakra UI未处理运行时错误排查求助

• 先抓准错误细节：打开浏览器控制台（F12），复制完整的报错栈信息，重点关注报错起始点是否关联Chakra UI或framer-motion的组件/API（比如motion.*组件、Chakra的useTheme、useAnimation等）
• 核对依赖版本：执行npm list @chakra-ui/react framer-motion next，查看这几个核心包的版本是否有意外更新（比如lock文件被修改），若有版本变动，回退到之前稳定的版本测试
• 组件隔离测试：把近期新增/修改的组件单独提取到极简Next.js页面中测试，看是否能复现错误；也可以逐步移除现有页面中的Chakra/framer-motion相关组件，定位触发错误的具体模块
• 验证SSR/SSG兼容性：Next.js服务端渲染场景下，部分Chakra UI和framer-motion的API需要特殊处理（比如framer-motion的useInView在服务端会抛出异常），确认报错页面的渲染模式，尝试添加export const ssr = false禁用页面SSR，看错误是否消失
• 清除缓存环境：删除.next文件夹、node_modules和锁文件（package-lock.json/yarn.lock），重新执行npm install和npm run dev，排除缓存导致的异常
• 检查自定义配置：如果用到了framer-motion的自定义动画变体（variants）或Chakra UI的自定义主题，确认配置中没有语法错误、未定义的变量或属性引用（比如动画属性拼写错误、主题颜色不存在）

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