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

Question

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

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)(.*)']
};