Next.js v13引入firestore-stripe-payments报Unexpected token 'export'错误

这个错误本质是@stripe/firestore-stripe-payments的ES模块语法在Next.js的模块解析环境中未被正确处理，以下是具体解决步骤：

• 添加转译配置到next.config.js
  Next.js默认不会转译第三方ES模块包，需手动指定转译该包：

  /** @type {import('next').NextConfig} */
  const nextConfig = {
    transpilePackages: ["@stripe/firestore-stripe-payments"],
  };
  
  module.exports = nextConfig;
  

• 区分Router环境处理

  • 若使用App Router（app目录）：必须在使用该包的组件顶部添加'use client'声明，因为该包依赖浏览器环境API，需标记为客户端组件：

    'use client';
    import { getStripePayments } from "@stripe/firestore-stripe-payments";
    

  • 若使用Page Router（pages目录）：确保页面文件不混用require和import语法，保持模块规范统一。

• 清除缓存并重装依赖
  执行以下命令清除缓存后重启服务，避免旧解析逻辑残留：

  rm -rf .next node_modules package-lock.json
  npm install
  npm run dev
  

  （使用yarn的话对应执行yarn cache clean && rm -rf .next node_modules yarn.lock && yarn install && yarn dev）

• 更新包版本
  执行npm update @stripe/firestore-stripe-payments升级到最新版本，旧版本可能存在模块兼容性瑕疵。

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