Middleware throwing error on Next.js v13.4.4

[ben-propflo]

Checklist

• The issue can be reproduced in the nextjs-auth0 sample app (or N/A).
• I have looked into the Readme, Examples, and FAQ and have not found a suitable solution or answer.
• I have looked into the API documentation and have not found a suitable solution or answer.
• I have searched the issues and have not found a suitable solution or answer.
• I have searched the Auth0 Community forums and have not found a suitable solution or answer.
• I agree to the terms within the Auth0 Code of Conduct.

Description

Hey guys,

I've just upgraded Next.js from v13.2.3 to v13.4.4 and our middleware has just started failing to compile with the following error within @auth0/nextjs-auth0:

- error ./node_modules/@auth0/nextjs-auth0/dist/helpers/with-middleware-auth-required.js
Module parse failed: Identifier 'NextResponse' has already been declared (3:6)
| "use strict";
| const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;
> const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;
| const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;
| const NextResponse = require("next/dist/server/web/spec-extension/response").NextResponse;

Import trace for requested module:
./node_modules/@auth0/nextjs-auth0/dist/helpers/with-middleware-auth-required.js
./node_modules/@auth0/nextjs-auth0/dist/edge.js

We aren't using withMiddlewareAuthRequired, instead choosing to roll our own which I guessed where the problem may lie, however after some additional digging, it looks like the example code is also throwing the same error:

import { NextResponse } from 'next/server'
import { initAuth0 } from '@auth0/nextjs-auth0/edge'

const auth0 = initAuth0({});

export default auth0.withMiddlewareAuthRequired(async function middleware(req) {
  const res = NextResponse.next();
  const user = await auth0.getSession(req, res);
  return res;
});

Here's our middleware.ts for reference as well:

import { NextFetchEvent, NextRequest, NextResponse } from 'next/server'
import { isGreenVal } from 'shared/isGreenVal'
import { Auth0Edge, initAuth0 } from '@auth0/nextjs-auth0/edge'

export const myMiddleware = async (req: NextRequest) => {
  const { pathname } = req.nextUrl

  const host = req.headers.get('host') ?? ''

  if (isGreenVal(host) && pathname == '/') {
    const url = req.nextUrl.clone()
    url.pathname = '/green-value-landing'
    return NextResponse.rewrite(url)
  }

  if (
    isGreenVal(host) ||
    pathname.startsWith('/api/') ||
    pathname.startsWith('/_next/') ||
    pathname.startsWith('/fonts/') ||
    pathname.startsWith('/favicon/') ||
    pathname.startsWith('/img/')
  ) {
    return
  }

  const res = NextResponse.next()
  const auth0 = getAuthEdge(req)
  const sessionUser = (await auth0.getSession(req, res))?.user!

  if (sessionUser === undefined) {
    const baseUrl =
      req.headers.get('origin') ||
      `${process.env.NODE_ENV === 'development' ? 'http' : 'https'}://${req.headers.get('host')}`

    return NextResponse.redirect(`${baseUrl}/api/auth/login`)
  }

  return
}

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const response = myMiddleware(req)

  if (response) return response
}

function getAuthEdge(req: NextRequest): Auth0Edge {
  const isGreenVal =
    process.env.GREENVAL_HOST &&
    (req.headers.get('host')?.includes(process.env.GREENVAL_HOST) ?? false)

  const instance = initAuth0({
    baseURL:
      req.headers.get('origin') ||
      `${process.env.NODE_ENV === 'development' ? 'http' : 'https'}://${req.headers.get('host')}`,
    clientID: isGreenVal ? process.env.AUTH0_CLIENT_ID_GREENVAL : process.env.AUTH0_CLIENT_ID,
    clientSecret: isGreenVal
      ? process.env.AUTH0_CLIENT_SECRET_GREENVAL
      : process.env.AUTH0_CLIENT_SECRET,
  })

  return instance
}

I appreciate this may also just be a bug in Next.js somewhere!

Reproduction

1. Upgrading from Next.js v13.2.3 to v13.4.4 breaks with our own code
2. Trying the example code also throws the same error

Additional context

No response

nextjs-auth0 version

2.2.2 & 2.6.0 (tried both)

Next.js version

13.4.4

Node.js version

18.16.0

[ben-propflo]

I've just downgraded to Next.js 13.4.3 and this appears to be working fine, so I'll stick with that for now. I suspect they've stuffed something up as I found these issues:
nextauthjs/next-auth#7650
vercel/next.js#50249

I think the fix will be coming in: vercel/next.js#50376

[Noah-Haf]

I have the same issue too, downgrading to Next.Js 13.4.3 fixed the issue.

[adamjmcgrath]

Thanks for raising this @ben-propflo

I can confirm that this has been fixed on Next.js https://github.com/vercel/next.js/releases/tag/v13.4.5-canary.0

[Collins-Ruto]

Renaming my middleware.ts to _middleware.ts solved the issue for me in Next.Js 13.4.4.