🐛 BUG: top level await breaks next.js with typescript template

[beratbayram]

Which Cloudflare product(s) does this pertain to?

C3 (npm create cloudflare)

What versions are you using?

2.35.1 [C3 - create-cloudflare@latest]

What operating system and version are you using?

Mac Sequoia 15.2

Please provide a link to a minimal reproduction

No response

Describe the Bug

npm create cloudflare@latest . --framework=next

create-cloudflare creates a next.js project with a top-level await in the config file. If typescript is selected, it causes a problem because top-level await can only be used inside a .mts or .mjs file, but the Next config is a .ts file and can't be a .mts file(1). A simple npm run dev causes:

ReferenceError: await is not defined

There is no problem if javascript is selected because next config is a .mjs file.

There is no problem if JavaScript is selected because the Next config is a .mjs file. I have proposed a solution at this comment. But the code block below says awaiting may not be necessary, so maybe we can delete the await and be done with it. In any case, the template engine should not output an invalid configuration.

if (process.env.NODE_ENV === 'development') {
	// `await`ing the call is not necessary but it helps making sure that the setup has succeeded.
	//  If you cannot use top level awaits you could use the following to avoid an unhandled rejection:
	//  `setupDevPlatform().catch(e => console.error(e));`
	await setupDevPlatform();
}

From: https://github.com/cloudflare/next-on-pages/blob/main/internal-packages/next-dev/README.md

If you give me directions, I can open a PR.

Please also see other issues at the next-on-pages repo with the same problem:

cloudflare/next-on-pages#927
cloudflare/next-on-pages#925

Please provide any relevant error logs

No response

[dario-piotrowicz]

Hi @beratbayram 🙂

Thanks for the issue and sorry for the late reply I just only now noticed it

Given this problem I think C3 should create a next.config.mjs file instead and use jsdocs for types, exactly how you did it here: cloudflare/next-on-pages#925 (comment)

Would you like to open a PR with this change? 🙂

[beratbayram]

Thank you for your reply and it will be my first open source contribution. So sorry for any mistakes in advance. I can open a PR but it will take week because I don't have access to my work setup due to a family trip. I hope you don't mind.

Also, I am planning to discard the next starter's config and hard code a new .mjs file. It will work but it might break if nextjs team decides to change the file. Maybe we should limit it to some versions.

Other possible solutions:

• Try async config like this comment
• Try to transpile ts file to js which will be messy

What do you think @dario-piotrowicz?

[dario-piotrowicz]

Thank you for your reply and it will be my first open source contribution. So sorry for any mistakes in advance. I can open a PR but it will take week because I don't have access to my work setup due to a family trip. I hope you don't mind.

Also, I am planning to discard the next starter's config and hard code a new .mjs file. It will work but it might break if nextjs team decides to change the file. Maybe we should limit it to some versions.

Other possible solutions:

• Try async config like this comment
• Try to transpile ts file to js which will be messy

What do you think @dario-piotrowicz?

Thanks a lot @beratbayram, I am sure you'll do a fantastic job, I'm very excited that you picked Cloudflare for your first contribution 😄

I think we can wait until you're back, unless we start getting a bunch of complains regarding this (hopefully not 🤞)

I think we should just replace the .ts file with an template/hardcoded .mjs one as you suggested, the config file is pretty stable so I don't think Next.js would break it (especially not without a major bump). So I would just keep things simple here 🙂👍 (and we can always fix/re evaluate things later on if needed).

If you need any help understanding the create-cloudflare source code please just do let me know 🙂