Can't import next/server from edge function

Support
, ,
1

We have a Next 13 project (using the pages router) and we’re having some problems with middleware.

Middleware defined in src/middleware.ts works, but then I have problems defining additional edge functions in the netlify.toml

To work around this I’ve tried to switch to explicitly defining the middleware in the netlify.toml, but I seem to be having problems with the edge function npm package beta

[edge_functions]]
path = '/*'
function = 'middleware'

The only imports in the 2 files defined are

import { NextMiddleware, NextResponse } from "next/server";

Relevant log:

3:02:22 PM: Edge Functions bundling                                       
3:02:22 PM: ────────────────────────────────────────────────────────────────
3:02:22 PM: ​
3:02:22 PM: Packaging Edge Functions from apps/nextjs/netlify/edge-functions directory:
3:02:22 PM:  - middleware
3:02:22 PM:  - subdomain-redirect
3:02:22 PM: error: Uncaught (in promise) Error: Relative import path "next/server" not prefixed with / or ./ or ../ and not in import map from "file:///root/apps/nextjs/netlify/edge-functions/middleware.ts"
3:02:22 PM:       const ret = new Error(getStringFromWasm0(arg0, arg1));
3:02:22 PM:                   ^
3:02:22 PM:     at __wbg_new_d258248ed531ff54 (file:///opt/buildhome/node-deps/node_modules/@netlify/edge-bundler/deno/vendor/deno.land/x/eszip@v0.55.2/eszip_wasm.generated.js:443:19)

Link to full build log

2

Why do you need next/server in there? Is there something specific that can’t be achieved without that?

3

Hi @hrishikesh sorry for the delay getting back to you

We’ve been having trouble with streaming/SSE with netlify when using nextjs’ src/middleware.ts, so I was attempting to explicitly use the netlify middleware defined in netlify.toml instead.

I’ve been unable to define both a next src/middleware.ts and one specific non-middleware edge function in the netlify.toml

Netlify docs talk about how nextjs middleware runs on netlify’s edge, but don’t explicitly call out any differences from other netlify edge functions like this

Based on your reply I thought maybe I should be using @netlify/next instead of next/server.
The docs suggest this

import type { NextRequest } from "next/server";
import type { MiddlewareRequest } from "@netlify/next";
//...
  const request = new MiddlewareRequest(nextRequest);

(this is actually invalid code straight from the docs, as you can’t import type and then use the constructor)

Which results in this error, presumably because it’s not a nextjs middleware but a netlify one

11:41:32 PM:   Error message
11:41:32 PM:   There was an error when loading the "@netlify/next" npm module. Support for npm modules in edge functions is an experimental feature. Refer to https://ntl.fyi/edge-functions-npm for more information.

When I rewrite it to use @netlify/edge-functions I get other errors

12:51:23 PM: Packaging Edge Functions from apps/nextjs/netlify/edge-functions directory:
12:51:23 PM:  - middleware
12:51:23 PM:  - subdomain-redirect
12:51:24 PM: Failed during stage "building site": Build script returned non-zero exit code: 2
12:51:24 PM: error: Uncaught (in promise) Error: Error: Could not find file: file:///opt/build/repo/apps/nextjs/netlify/edge-functions/subdomain-redirect
12:51:24 PM:       const ret = new Error(getStringFromWasm0(arg0, arg1));
12:51:24 PM:                   ^

Code:

import type { Config, Context } from "@netlify/edge-functions";

import redirectNetlifySubdomains, {
  shouldRedirectFromNetlify,
} from "./subdomain-redirect";

async function middleware(request: Request, context: Context) {
  if (shouldRedirectFromNetlify(request)) {
    return redirectNetlifySubdomains(request, context);
  }

  return context.next();
}

edit: I also tried moving the subdomain-redirect import out of the edge-functions dir and to the src folder instead, but ran into this error

3:21:33 PM: Failed during stage "building site": Build script returned non-zero exit code: 2
3:21:33 PM: error: Uncaught (in promise) Error: Error: Could not find file: file:///opt/build/repo/apps/nextjs/src/subdomain-redirect
3:21:33 PM:       const ret = new Error(getStringFromWasm0(arg0, arg1));
4

Hard to say what’s causing this without a reproduction to look at. Mind sharing one?