为什么我在使用 Next.js 中间件时出现此错误？

Question

问题

我正在使用 Next.js、Prisma 和 NextAuth 的电子邮件提供商策略来设置身份验证系统。如果请求不包含有效会话，我想使用 Next.js 中间件来重定向请求。但是对中间件的任何使用，就像在 middleware.js 文件中声明一个函数一样，都会抛出此错误：

error - (middleware)/node_modules/oidc-token-hash/lib/shake256.js (3:0) @ <unknown>
error - Cannot read properties of undefined (reading 'substr')
null

它会记录此错误大约 5 次。这是位于

middleware.js

 的 

{root}/middleware.js

文件

import { NextResponse } from 'next/server';

export default function middleware(request) {
  return NextResponse.next();
}

这是错误中指定的

node_modules/oidc-token-hash/lib/shake256.js

文件：

const crypto = require('crypto');

const [major, minor] = process.version.substr(1).split('.').map((x) => parseInt(x, 10));
const xofOutputLength = major > 12 || (major === 12 && minor >= 8);
const shake256 = xofOutputLength && crypto.getHashes().includes('shake256');

module.exports = shake256;

在创建此文件之前，该应用程序运行良好。我可以通过电子邮件链接进行身份验证，向 API 路由发出简单的 GET 请求，并执行任何其他功能。我以前从未见过这个错误。我能猜到的最接近的是我有某种依赖性/版本控制问题，但我正在使用接近最新版本的 Next、React、Prisma、NextAuth、Node 等。

也许值得注意的是我正在使用 React Query？除此之外我不知道是什么原因造成的。

Package.json：

{
  "name": "nextjs-starter-auth-sql",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next-auth/prisma-adapter": "^1.0.4",
    "@prisma/client": "^4.3.0",
    "bcrypt": "^5.0.1",
    "next": "12.2.5",
    "next-auth": "^4.10.3",
    "nodemailer": "^6.7.8",
    "prop-types": "^15.8.1",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-query": "^3.39.2"
  },
  "devDependencies": {
    "autoprefixer": "^10.4.8",
    "eslint": "^8.23.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "12.2.5",
    "eslint-plugin-import": "^2.26.0",
    "eslint-plugin-jsx-a11y": "^6.6.1",
    "eslint-plugin-react": "^7.31.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8.4.16",
    "prisma": "^4.3.0",
    "tailwindcss": "^3.1.8"
  }
}

很高兴回答您的任何问题。非常感谢您的帮助。

Answer 1

我遇到了这个问题，因为我将配置从

[...nextauth].ts

导入到我的

middleware.ts

模块中。中间件似乎无法使用其他也使用

next-auth

的模块的导出。

我能够通过将我需要的配置部分移动到其自己的专用模块，然后分别从该模块导入

[...nextauth].ts

和

middleware.ts

来解决这个问题。

之前，不工作

// src/pages/api/auth/[...nextauth].ts
import type { AuthOptions } from 'next-auth';
import NextAuth from 'next-auth';
import Auth0Provider from 'next-auth/providers/auth0';

export const authOptions: AuthOptions = {
  pages: {
    signIn: '/auth/signin',
  },
  providers: [/* your providers */],
};

export default NextAuth(authOptions);

// src/middleware.ts
import { withAuth } from 'next-auth/middleware';

// 🚫 Cannot import from other modules that depend on `next-auth`.
import { authOptions } from '@/pages/api/auth/[...nextauth]';

export default withAuth({
  pages: authOptions.pages,
});

之后，工作

// src/config/pages.ts
export const pages = {
  signIn: '/auth/signin',
};

// src/pages/api/auth/[...nextauth].ts
import type { AuthOptions } from 'next-auth';
import NextAuth from 'next-auth';
import Auth0Provider from 'next-auth/providers/auth0';

import { pages } from '@/config/pages';

export default NextAuth({
  pages,
  providers: [/* your providers */],
});

// src/middleware.ts
import { withAuth } from 'next-auth/middleware';

// ✅ Import the static config - does not use `next-auth`.
import { pages } from './config/pages';

export default withAuth({
  pages,
});

Answer 2

对于使用 Auth0 的人来说，如果不使用 /edge 包就会出现这个问题。

例如，

 Replace this import { getSession } from '@auth0/nextjs-auth0';

有了这个

 Replace this import { getSession } from '@auth0/nextjs-auth0/edge';

Answer 3

我遇到了类似的问题，我尝试了多种方法，包括文档中的这个方法

• https://vercel.com/docs/concepts/functions/edge-middleware#creating-edge-middleware
• https://nextjs.org/docs/advanced-features/middleware

尽管如此，我解决这个问题的唯一方法是将 Nextjs 版本降级到“12.1.0”。

删除node_modules文件夹和package-lock.json，然后使用命令“npm install”在package.json中使用版本“next”：“12.1.0”重新安装依赖项，然后重试。

让我知道它是否有效。