[🐛 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.