Next.js应用中Unexpected token错误排查求助

核心错误解析 #

浏览器控制台抛出的错误本质是：Apollo Client请求GraphQL接口时，收到的不是预期的JSON响应，而是HTML内容（比如<doctype>开头的页面），导致JSON解析失败。

Error: Unexpected token '<', "<!doctype "... is not valid JSON
    at new ApolloError (index.js?6610:29:1)
    at Object.error (QueryManager.js?7fcd:137:74)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at Object.eval [as error] (asyncMap.js?b322:32:41)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at eval (iteration.js?8d45:4:50)
    at Array.forEach (<anonymous>)
    at iterateObserversSafely (iteration.js?8d45:4:1)
    at Object.error (Concast.js?a4f8:36:43)
    at notifySubscription (module.js?580a:137:1)
    at onNotify (module.js?580a:176:1)
    at SubscriptionObserver.error (module.js?580a:229:1)
    at RetryableOperation.eval (retryLink.js?c650:55:1)
    at step (tslib.es6.js?f7a0:102:1)
    at Object.eval [as next] (tslib.es6.js?f7a0:83:46)
    at fulfilled (tslib.es6.js?f7a0:73:43)

具体排查方向 #

• 验证Apollo Client的GraphQL端点配置
  打开lib/apollo/client.ts，确认客户端配置的uri是否指向正确的API路由（比如/api/graphql）。如果端点写错，Next.js会返回404 HTML页面，直接导致JSON解析错误。

• 检查GraphQL API路由的可用性
  在浏览器直接访问你的GraphQL端点（例如http://localhost:3000/api/graphql），如果返回的是HTML而不是GraphQL playground或JSON响应，说明API路由文件（如pages/api/graphql.ts）存在问题：

  • 确认文件是否存在
  • 检查文件内是否有语法错误、未捕获的异常，导致返回错误页面

• 排查注册Mutation的后端逻辑
  查看处理注册的GraphQL resolver代码：

  • 确认是否正确连接PostgreSQL数据库
  • 检查resolver是否抛出未处理的错误，导致后端返回HTML错误页而非JSON响应
  • 验证注册逻辑是否正确生成用户数据并写入数据库

• 修正fetch请求的错误写法
  之前添加try-catch时出现类型错误，是因为错误地将try-catch放在了fetch的body参数中。正确写法如下，同时注意必须添加Content-Type头，否则后端无法解析JSON：

  const onSubmit = (data: RegisterInput) => {
    return form.handler(() => register({ variables: { data } }), {
      onSuccess: async (data) => {
        try {
          await fetch("/api/login", {
            method: "post",
            headers: { "Content-Type": "application/json" }, // 必须添加该头
            body: JSON.stringify({
              [LOGIN_TOKEN_KEY]: data.register.token,
              [LOGIN_REFRESH_TOKEN_KEY]: data.register.refreshToken,
            }),
          })
          client.writeQuery<MeQuery>({ query: MeDocument, data: { me: data.register.user } })
          router.replace(redirect || "/")
        } catch (error) {
          console.error("登录请求失败:", error)
        }
      },
    })
  }
  

• 查看网络请求的实际响应
  在Chrome开发者工具的「网络」面板中，找到Apollo发送的GraphQL POST请求：

  • 切换到「响应」标签，确认返回内容是否为HTML
  • 如果是HTML，查看具体内容（如404、500页面），直接定位后端问题

• 验证数据库连接与权限

  • 确认PostgreSQL服务正在运行
  • 检查应用使用的数据库账号是否有创建用户表、插入数据的权限
  • 查看PostgreSQL日志，确认是否有数据库层面的错误（如表不存在、约束冲突）

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