Clerk 中间件在 Next 12.2.2 的生产中崩溃

Question

无法深入了解此问题的根本原因，但我正在尝试使用 NextJS 12.2.2 实现 Clerk 身份验证，并且我在开发环境中一切正常。然而，当我进入生产环境时，由于以下错误，我的网站在加载时立即崩溃：

ReferenceError: __import_unsupported is not defined
    at (vc/edge/function:14:2050)
    at (vc/edge/function:14:656)
    at (vc/edge/function:14:3107)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:13871)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:15731)
    at (vc/edge/function:14:656)
    at (vc/edge/function:67:27265)
    at (vc/edge/function:14:656)

ReferenceError: __import_unsupported is not defined
    at (external root " __import_unsupported('buffer')":1:0)
    at (webpack/bootstrap:21:0)
    at (node_modules/rfc4648/lib/index.mjs:11:15)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/dist/server/clerk.js:5:18)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/dist/server/index.js:4:21)
    at (webpack/bootstrap:21:0)
    at (node_modules/@clerk/nextjs/server.js:1:0)
    at (webpack/bootstrap:21:0)

我的 Clerk middleware.js 文件：

import { withClerkMiddleware } from "@clerk/nextjs/server";
import { NextResponse } from "next/server";

export default withClerkMiddleware((req) => {
  return NextResponse.next();
});

我的package.json

{
  "name": "generic_auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.8.2",
    "@clerk/themes": "^1.2.41",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@next-auth/prisma-adapter": "^0.5.2-next.19",
    "@prisma/client": "^3.11.1",
    "@react-google-maps/api": "^2.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@vercel/analytics": "^0.1.7",
    "aws-sdk": "^2.1105.0",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "global": "^4.4.0",
    "graphql": "^16.3.0",
    "image-size": "^1.0.1",
    "material-ui-icons": "^1.0.0-beta.36",
    "micro": "^9.3.4",
    "moment": "^2.29.2",
    "next": "12.2.2",
    "next-auth": "^4.10.3",
    "next-stripe": "^1.0.0-beta.1",
    "nodemailer": "^6.7.3",
    "react": "17.0.2",
    "react-dom": "17.0.2",
    "react-places-autocomplete": "^7.3.0",
    "react-query": "^3.34.19",
    "sass": "^1.49.9",
    "sharp": "^0.30.3",
    "stripe": "^8.215.0",
    "underscore": "^1.13.6",
    "vercel": "^24.0.1"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "prisma": "^3.11.1",
    "typescript": "4.6.3"
  }
}

有人对此有任何想法吗？很高兴提供调试此问题所需的任何其他信息，但不想用太多信息使原始帖子过载。谢谢！

Answer 1

withClerkMiddleware

现已弃用，但使用 Clerk 文档提供的代码片段会触发错误：

error - ../../node_modules/@clerk/nextjs/dist/esm/server-helpers.client.js (2:0) @ <unknown>
error - authMiddleware() can only be used in a server environment.

@Iknownthings 的回答为我指明了解决方案。

关键是从

@clerk/nextjs/server

导入而不是

@clerk/nextjs

middleware.ts

的完整示例（我正在使用 tRPC 后端）

import { authMiddleware } from '@clerk/nextjs/server';

export default authMiddleware();

export const config = {
  matcher: ['/((?!.*\\..*|_next).*)', '/', '/(api|trpc)(.*)']
};

Answer 2

从 Next 12.2.2 -> 12.2.6 更新为我解决了这个问题。似乎 12.2.2 中的中间件存在问题，现已解决。

需要明确的是，在更新 Next 的同时，我还更新了 React 和 React-dom，并从之前的 Auth 实现中删除了未使用的 Next-Auth 包。更新package.json如下：

{
  "name": "generic_auth",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "cross-env next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "postinstall": "prisma generate"
  },
  "dependencies": {
    "@clerk/nextjs": "^4.8.2",
    "@clerk/themes": "^1.2.41",
    "@emotion/react": "^11.8.2",
    "@emotion/styled": "^11.8.1",
    "@material-ui/core": "^4.12.3",
    "@material-ui/icons": "^4.11.2",
    "@prisma/client": "^3.11.1",
    "@react-google-maps/api": "^2.7.0",
    "@stripe/stripe-js": "^1.26.0",
    "@vercel/analytics": "^0.1.7",
    "aws-sdk": "^2.1105.0",
    "cross-env": "^7.0.3",
    "fs": "^0.0.1-security",
    "global": "^4.4.0",
    "graphql": "^16.3.0",
    "image-size": "^1.0.1",
    "material-ui-icons": "^1.0.0-beta.36",
    "micro": "^9.3.4",
    "moment": "^2.29.2",
    "next": "12.2.6",
    "next-stripe": "^1.0.0-beta.1",
    "nodemailer": "^6.7.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-places-autocomplete": "^7.3.0",
    "react-query": "^3.34.19",
    "sass": "^1.49.9",
    "sharp": "^0.30.3",
    "stripe": "^8.215.0",
    "underscore": "^1.13.6",
    "vercel": "^24.0.1"
  },
  "devDependencies": {
    "@types/node": "17.0.23",
    "@types/react": "17.0.43",
    "@types/react-dom": "17.0.14",
    "eslint": "8.12.0",
    "eslint-config-next": "12.1.2",
    "prisma": "^3.11.1",
    "typescript": "4.6.3"
  }
}

对于任何想要选择 Auth 的人，请认真看看 Clerk！在过去的一个小时里，我能够通过他们网站上的实时聊天与他们的一位开发人员聊天以调试此问题，他们非常有帮助。最重要的是，Clerk 很容易成为我经历过的最简单的体验之一，并为我减轻了 Auth 的压力，让我能够专注于实现我的网站。

Answer 3

我面临着同样的问题： 错误：职员：检测到无限重定向循环。这通常意味着我们无法确定此请求的身份验证状态。下面列出了常见原因和解决方案。

如果有人知道如何解决请帮忙。