ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server'

Question

I just cloned the Next Auth Example , changed ports in package.json to match my server and added my domain in .env.local . Because of WASM middleware in Next 12, I had to downgrade to Next 11, so I just edited package.json to "next": "^11.1.3" and ran npm i again.

When I try to npm run build , I get this error:

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server' in 'domain.com/pages'

The npm run dev works fine.

The page that has the server import is: https://github.com/nextauthjs/next-auth-example/blob/main/pages/_middleware.js

import { getToken } from "next-auth/jwt"
import { NextResponse } from "next/server"

/** @param {import("next/server").NextRequest} req */
export async function middleware(req) {
  if (req.nextUrl.pathname === "/middleware-protected") {
    const session = await getToken({
      req,
      secret: process.env.SECRET,
      secureCookie:
        process.env.NEXTAUTH_URL?.startsWith("https://") ??
        !!process.env.VERCEL_URL,
    })
    // You could also check for any property on the session object,
    // like role === "admin" or name === "John Doe", etc.
    if (!session) return NextResponse.redirect("/api/auth/signin")
    // If user is authenticated, continue.
  }
}

Full Log:

> next-auth-example@0.0.0 build /domain.com
> next build

info  - Loaded env from /domain.com/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
info  - Checking validity of types
warn  - No ESLint configuration detected. Run next lint to begin setup
info  - Creating an optimized production build
Failed to compile.

ModuleNotFoundError: Module not found: Error: Can't resolve 'next/server' in 'domain.com/pages'


> Build error occurred
Error: > Build failed because of webpack errors
    at domain.com/node_modules/next/dist/build/index.js:397:19
    at async Span.traceAsyncFn (domain.com/node_modules/next/dist/telemetry/trace/trace.js:60:20)
    at async Object.build [as default] (domain.com/node_modules/next/dist/build/index.js:77:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! next-auth-example@0.0.0 build: `next build`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the next-auth-example@0.0.0 build script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     domain.com/.npm/_logs/blahblahblah-debug.log // I edited this line

package.json

{
  "name": "authentication",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "author": "damn",
  "license": "ISC",
  "dependencies": {
    "next": "^11.1.2",
    "next-auth": "^4.1.2",
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  }
}

(removed -p since it had no effect in my environment)

What's causing the problem and how should I solve it?

Answer 1

Middleware as a concept was introduced with NextJS 12 - See here - https://nextjs.org/blog/next-12#introducing-middleware

For your usecase, see here and follow the api routes example.