Next JS 12.0.3使用framer-motion时刷新页面出现SyntaxError报错

问题原因说明 #

该问题是NextJS 12.0.x早期版本的已知问题，核心是服务端渲染阶段对ES模块命名导出的处理逻辑存在缺陷。你遇到的路由跳转正常、刷新报错的现象刚好匹配问题的触发条件：路由跳转走客户端渲染，不存在模块导入兼容问题；刷新时走服务端渲染，framer-motion的ESM导出格式和NextJS当时的CommonJS模块处理逻辑发生冲突。
不需要直接回退到更早的NextJS版本，优先尝试以下解决方案即可： #

可行解决方案 #

• 方案1：修改next.config.js配置，关闭esmExternals实验特性，新增配置如下：

module.exports = {
  experimental: {
    esmExternals: false
  }
}

修改后重启项目验证即可，该配置可以强制NextJS在服务端渲染阶段统一处理外部依赖的导入格式，避免ESM和CommonJS的冲突。

• 方案2：对用到motion标签的组件关闭SSR渲染，你可以用next/dynamic动态导入组件并禁用SSR：

// 在用到Login组件的地方改为动态导入
import dynamic from 'next/dynamic'
const Login = dynamic(() => import('./Login'), { ssr: false })

也可以单独对motion组件做动态导入，避免影响整个页面的渲染逻辑。

• 方案3：版本适配，如果你不想修改配置，可以选择以下任意一种版本调整方式：
  • 将NextJS升级到12.0.7及以上版本，该版本官方已经修复了ESM导入兼容的相关问题
  • 将framer-motion降级到5.x版本，该版本的导出格式适配NextJS 12.0.3的模块处理逻辑

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