[🐛 Bug]: Typescript transpilation error with clean Next.js template

[double-thinker]

next-on-pages environment related information

System: Platform: darwin Arch: arm64 Version: Darwin Kernel Version 24.2.0: Fri Dec 6 19:01:59 PST 2024; root:xnu-11215.61.5~2/RELEASE_ARM64_T6000 CPU: (10) arm64 Apple M1 Max Memory: 64 GB Shell: /bin/zsh Package Manager Used: npm (10.9.0)

Relevant Packages: @cloudflare/next-on-pages: 1.13.7 vercel: N/A next: N/A

Description

With a clean, newly created next-on-pages pnpm run dev raises this error only if Typescript is enabled:

> [email protected] dev /yyy/xxxx
> next dev --turbopack

/yyy/xxxx/next.config.compiled.js:16
    await (0, _nextdev.setupDevPlatform)();
    ^

ReferenceError: await is not defined
    at Object.<anonymous> (/yyy/xxxx/next.config.compiled.js:16:5)
    at Module._compile (node:internal/modules/cjs/loader:1565:14)
    at requireFromString (/yyy/xxxx/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/next-config-ts/require-hook.js:81:7)
    at transpileConfig (/yyy/xxxx/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/build/next-config-ts/transpile-config.js:63:51)
    at async loadConfig (/yyy/xxxx/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/server/config.js:771:36)
    at async Module.nextDev (/yyy/xxxx/node_modules/.pnpm/[email protected][email protected][email protected][email protected]/node_modules/next/dist/cli/next-dev.js:190:14)

Node.js v22.12.0
 ELIFECYCLE  Command failed with exit code 1.

Reproduction

pnpm create cloudflare@latest cpshomeweb --framework=next with the following options:

 Would you like to use TypeScript? … Yes
 Would you like to use ESLint? …  Yes
 Would you like to use Tailwind CSS? …  Yes
 Would you like your code inside a `src/` directory? …  Yes
 Would you like to use App Router? (recommended) … Yes
 Would you like to use Turbopack for `next dev`? …  Yes
 Would you like to customize the import alias (`@/*` by default)? … No

Pages Deployment Method

Direct Upload (wrangler pages publish or the @cloudflare/pages-action GitHub Action)

Pages Deployment ID

No response

Additional Information

No response

Would you like to help?

• [ ] Would you like to help fixing this bug?

[double-thinker]

A potential fix could be to remove the await. Based on the setupDevPlatform docs:

Sets up the Cloudflare platform that needs to be available during development time (using
Next.js' standard dev server)

Note: the function is an async one, but it doesn't need to be awaited

This actually fixes the problem, but I am not sure if it creates other side effects.

[EqualMa]

A workaround is to use Async Configuration

import type { NextConfig } from "next";

const nextConfig: () => Promise<NextConfig> = async () => {
  // Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
  // (when running the application with `next dev`), for more information see:
  // https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
  if (process.env.NODE_ENV === "development") {
    const { setupDevPlatform } = await import(
      "@cloudflare/next-on-pages/next-dev"
    );
    await setupDevPlatform();
  }

  return {
    /* config options here */
  };
};

export default nextConfig;

[beratbayram]

Top-level await requires an es-module file (aka .mjs or .mts). Since Next does not support .mts for the config file (1), a simple workaround would be to change the file name to next.config.mjs and the content to:

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use
// bindings during local development (when running the application with 
// `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform();
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

export default nextConfig;

I haven't tested it much but it seems to be working.

[Saranomy]

@beratbayram thank you for this!

Top-level await requires an es-module file (aka .mjs or .mts). Since Next does not support .mts for the config file (1), a simple workaround would be to change the file name to next.config.mjs and the content to:

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use
// bindings during local development (when running the application with 
// `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform();
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

export default nextConfig;

I haven't tested it much but it seems to be working.

[ts-web]

If you want typescript to type-check the file, add // @ts-check at the top:

next.config.mjs

// @ts-check

import { setupDevPlatform } from '@cloudflare/next-on-pages/next-dev';

// Here we use the @cloudflare/next-on-pages next-dev module to allow us to use bindings during local development
// (when running the application with `next dev`), for more information see:
// https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md
if (process.env.NODE_ENV === 'development') {
  await setupDevPlatform();
}

/** @type {import('next').NextConfig} */
const nextConfig = {
  /* config options here */
};

export default nextConfig;

per the docs

[dario-piotrowicz]

Hello 🙂 Thank you for the issue and apologies for the late reply.

Earlier this year we released our Cloudflare adapter for OpenNext, and we have been continuously investing effort in its improvement since then. Existing deployments can continue to use the next-on-pages tooling, but the Cloudflare adapter for OpenNext is currently stable and recommended for deployment of Next.js applications to Cloudflare.

As such, we will no longer be maintaining next-on-pages. We recently deprecated the package on npm and we plan to archive this repo on Monday Sep 29, 2025. In preparation for archival, we are closing all open issues and PRs.

If you have concerns, please feel free to reply here before the repo is archived (after that, it will no longer be possible to comment) or to reach out to our team on Discord.

Thanks so much for using and contributing to next-on-pages 🧡