next/server Build Issue

[mackenly]

Creating this issue to follow up on a post made in Discord.

Hi, I'm running into an issue during my builds using Nextjs on Pages. This seems rather strange since the example on the next-on-pages repo shows next/server being used in middleware. Thanks for any pointers/suggestions!

My next.config.js is of course configured to include experimental: {runtime: "experimental-edge",} And I've included the log and my middleware below.

Logs:

16:23:50.927 ▲ Build Completed in .vercel/output [31s] 16:23:50.927 ▲ 16:23:51.080 ⚡️ 16:23:51.081 ⚡️ 16:23:51.081 ⚡️ Completed 'npx vercel build'. 16:23:51.081 ⚡️ 16:23:51.429 ✘ [ERROR] Could not resolve "next/server" 16:23:51.429 16:23:51.430 ../../../tmp/iy1gcmczsgf/middleware.func.js:1:27: 16:23:51.430 1 │ import {NextResponse} from 'next/server'; 16:23:51.430 ╵ ~~~~~~~~~~~~~ 16:23:51.430 16:23:51.431 You can mark the path "next/server" as external to exclude it from the bundle, which will remove this error. 16:23:51.431 16:23:51.468 /opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:1575 16:23:51.468 let error = new Error(`${text}${summary}`); 16:23:51.469 ^ 16:23:51.469 16:23:51.469 Error: Build failed with 1 error: 16:23:51.469 ../../../tmp/iy1gcmczsgf/middleware.func.js:1:27: ERROR: Could not resolve "next/server" 16:23:51.470 at failureErrorWithLog (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:1575:15) 16:23:51.470 at /opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:1033:28 16:23:51.470 at /opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:978:67 16:23:51.470 at buildResponseToResult (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:1031:7) 16:23:51.470 at /opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:1143:14 16:23:51.471 at responseCallbacks. (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:680:9) 16:23:51.471 at handleIncomingPacket (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:735:9) 16:23:51.471 at Socket.readFromStdout (/opt/buildhome/.npm/_npx/39e2fd552b408994/node_modules/esbuild/lib/main.js:656:7) 16:23:51.471 at Socket.emit (node:events:527:28) 16:23:51.471 at addChunk (node:internal/streams/readable:324:12) { 16:23:51.471 errors: [ 16:23:51.471 { 16:23:51.471 detail: undefined, 16:23:51.472 id: '', 16:23:51.472 location: { 16:23:51.472 column: 27, 16:23:51.472 file: '../../../tmp/iy1gcmczsgf/middleware.func.js', 16:23:51.472 length: 13, 16:23:51.472 line: 1, 16:23:51.472 lineText: "import {NextResponse} from 'next/server';", 16:23:51.472 namespace: '', 16:23:51.472 suggestion: '' 16:23:51.473 }, 16:23:51.473 notes: [ 16:23:51.473 { 16:23:51.473 location: null, 16:23:51.473 text: 'You can mark the path "next/server" as external to exclude it from the bundle, which will remove this error.' 16:23:51.473 } 16:23:51.473 ], 16:23:51.473 pluginName: '', 16:23:51.474 text: 'Could not resolve "next/server"' 16:23:51.474 } 16:23:51.474 ], 16:23:51.474 warnings: [] 16:23:51.474 } 16:23:51.474 16:23:51.474 Node.js v17.9.1 16:23:51.496 Failed: build command exited with code: 1 16:23:52.452 Failed: error occurred while running build command

Middleware Code:

import { NextResponse } from 'next/server'; import type { NextRequest } from 'next/server';

export const config = {
matcher: ['/', '/index'],
}

export function middleware(request: NextRequest) {
const basicAuth = request.headers.get('authorization')
const url = request.nextUrl

if (basicAuth) {
const authValue = basicAuth.split(' ')[1]
const [user, pwd] = atob(authValue).split(':')

if (user === process.env.NEXT_PUBLIC_USERNAME && pwd === process.env.NEXT_PUBLIC_PASSWORD) {
  return NextResponse.next()
}

}
url.pathname = '/api/auth'

return NextResponse.rewrite(url)
}

For reference, the starter I'm using: https://github.com/vercel/examples/tree/main/edge-middleware/basic-auth-password

[james-elicx]

I would theorise that at first glance this could have something to do with how the Vercel build output treats middleware. It appears that they build middleware as their own independent project, with its own node_modules in the build output, for some reason.

Please do note that I have not tested this theory, it was just something that I happened to notice when I was generating different configs a few days ago.

Screenshot of build output

[dario-piotrowicz]

@mackenly this issue has likely been fixed by #206 (see #129 (comment))

Could you please check if with the latest beta release everything works as expected?

[mackenly]

@dario-piotrowicz @james-elicx
Tested with the vercel example project and all builds good using the cloudflare/[email protected] beta version. There are some compatibility differences with the Vercel functions and Workers in the API route so didn't fully test the example, but it builds okay which should be a good sign. Thanks!

[dario-piotrowicz]

@mackenly great! 😃

Thank you so very much for checking!