[BUG] TypeError: A dynamic import callback was not specified when using getCloudflareContext

[dandoen]

Describe the bug

I am using a service binding in my middleware to let another worker handle authentication. I have configured this as following and this works properly when deployed and when running in preview mode locally.

import { Fetcher } from "@cloudflare/workers-types";

declare module "next/server" {
  interface NextRequest {
    apiClient: ApiClient;
  }
}

export interface Env {
  API: Fetcher;
}

function createApiClient(env: Env) {
  // fetch client using env.API
}

export async function middleware(request: NextRequest) {
  const env = (await getCloudflareContext()).env as Env;
  const apiClient = await createApiClient(env);
  request.apiClient = apiClient;
  
  // Redacted for brevity: check using api client whether user's token is valid. If not return 401
  
  return NextResponse.next();
}

But when in next dev this throws

TypeError: A dynamic import callback was not specified.

Steps to reproduce

1. Use getCloudflareContext in middleware.ts
2. Run app with next dev
3. Refresh the page

Expected behavior

No error to be thrown

@opennextjs/cloudflare version

experimental

Wrangler version

3.99.0

next info output

pnpm next info

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.0.0: Fri Sep 15 14:41:43 PDT 2023; root:xnu-10002.1.13~1/RELEASE_ARM64_T6000
  Available memory (MB): 65536
  Available CPU cores: 10
Binaries:
  Node: 22.12.0
  npm: 10.9.0
  Yarn: N/A
  pnpm: 9.15.0
Relevant Packages:
  next: 14.2.5 // An outdated version detected (latest is 15.1.3), upgrade is highly recommended!
  eslint-config-next: 15.0.3
  react: 18.3.1
  react-dom: 18.3.1
  typescript: 5.7.2

### Additional context

_No response_

[dandoen]

My current work around is to wrap the get cloudflare context and do something differently for local env which is not ideal

export interface Env {
  API: Fetcher;
}

export const getContext = async () => {
  if (process.env.NODE_ENV === "development") {
    return {
      API: {
        fetch: globalThis.fetch as unknown as Fetcher["fetch"],
        connect: globalThis.fetch as unknown as Fetcher["connect"],
      },
    } satisfies Env;
  }

  const env = await getCloudflareContext();
  return env.env as Env;
};

[ItsWendell]

Running into the same issue on the latest @opennextjs/cloudflare on version 0.3.6 and next.js 15.1.4, for context this happens in the middleware for me too.

Can confirm this only happens for getCloudflareContext() in the middleware, when I remove my calls to getCloudflareContext() it works fine.

[dario-piotrowicz]

Hi @dandoen, thanks for the issue 🙂

I can confirm that getCloudflareContext doesn't work for middlewares, the issue being that the function requires node.js but middlewares currently always run in the edge runtime 😓

You can see in my PR the solution I came up with, it's not the prettiest but it gets the job done, and I can't really think of anything better that we could do 😖

Please let me know what you think of my solution and give the prerelease package a try if you want 🙂 (@ItsWendell as well 😄)