[create-cloudflare] next.js with ts fix #7854

beratbayram · 2025-01-21T21:20:51Z

WHAT: It changes the output of next.js with TS template.
WHY: Basic templating is broken.
HOW: Existing customers are not affected. New customers will have a better experience.

Related bug only appears when nextjs is used with TS because C3 generates a top-level await statement inside a .ts file which is illegal. So this PR doesn't change how JS version is generated but creates a new next.config.mjs file with new hardcoded content for TS version specifically.

Only TS version is hardcoded to minimize the impact of possible config file change by the next.js team but we can discuss to do that to JS version as well for simplicity.

Other possible solutions are discussed at the linked issue but to summarise:

.mts file type can't be used because next config can't be a .mts file(1).
Async config and transpilation is too complex for this simple config file.

Tests
- TODO (before merge)
- Tests included
- Tests not necessary because: already written
E2E Tests CI Job required? (Use "e2e" label or ask maintainer to run separately)
- I don't know
- Required
- Not required because:
Public documentation
- TODO (before merge)
- Cloudflare docs PR(s):
- Documentation not necessary because: Changes the output not the usage

I've run tests and two fails as follows but I don't believe they are related to my changes.

changeset-bot · 2025-01-21T21:20:55Z

🦋 Changeset detected

Latest commit: a577775

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
create-cloudflare	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

beratbayram · 2025-01-21T21:23:12Z

dario-piotrowicz (asking maintainer to run E2E tests separately)

github-actions · 2025-01-21T22:29:46Z

A wrangler prerelease is available for testing. You can install this latest build in your project with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-wrangler-7854

You can reference the automatically updated head of this PR with:

npm install --save-dev https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/prs/7854/npm-package-wrangler-7854

Or you can use npx with this latest build directly:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-wrangler-7854 dev path/to/script.js

Additional artifacts:

cloudflare-workers-bindings-extension:

wget https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-workers-bindings-extension-7854 -O ./cloudflare-workers-bindings-extension.0.0.0-v8e853b74c.vsix && code --install-extension ./cloudflare-workers-bindings-extension.0.0.0-v8e853b74c.vsix

create-cloudflare:

npx https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-create-cloudflare-7854 --no-auto-update

@cloudflare/kv-asset-handler:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-kv-asset-handler-7854

miniflare:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-miniflare-7854

@cloudflare/pages-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-pages-shared-7854

@cloudflare/unenv-preset:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-unenv-preset-7854

@cloudflare/vite-plugin:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-vite-plugin-7854

@cloudflare/vitest-pool-workers:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-vitest-pool-workers-7854

@cloudflare/workers-editor-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-workers-editor-shared-7854

@cloudflare/workers-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-workers-shared-7854

@cloudflare/workflows-shared:

npm install https://prerelease-registry.devprod.cloudflare.dev/workers-sdk/runs/12924425658/npm-package-cloudflare-workflows-shared-7854

Note that these links will no longer work once the GitHub Actions artifact expires.

wrangler@3.105.0 includes the following runtime dependencies:

Package	Constraint	Resolved
`miniflare`	workspace:*	3.20241230.2
`workerd`	1.20241230.0	1.20241230.0
`workerd --version`	1.20241230.0	2024-12-30

Please ensure constraints are pinned, and miniflare/workerd minor versions match.

vicb · 2025-01-22T06:29:24Z

packages/create-cloudflare/templates/next/c3.ts

+	// 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') {


@dario-piotrowicz do we need (process.env.NODE_ENV === 'development') here? (or could it be inside setupDevPlatform ?

(The code here is only moved from l42 so not directly related to the PR)

This check is totally unnecessary, moving it inside setupDevPlatform wouldn't actually accomplish anything

it's here to try to make it extra clear to the developer that this function is only needed in development, in reality this only has any effect during development anyways

I'm happy to get rid of it if you want 👍

This check is totally unnecessary

Then I would drop it.

And in next-on-pages as well

.changeset/moody-walls-shake.md

vicb

I took a quick look here but I don't really think the changes are optimal, there should be no reason to need both a TS and JS version of updateNextXConfig.

One thing that look weird is that we do not pass --js or --ts to create-next-app

workers-sdk/packages/create-cloudflare/templates/next/c3.ts

Line 27 in 6c2e943

await runFrameworkGenerator(ctx, [projectName]);

beratbayram · 2025-01-22T06:59:51Z

I took a quick look here but I don't really think the changes are optimal, there should be no reason to need both a TS and JS version of updateNextXConfig.

JS version only prepends some code to existing config while TS version removes the existing one completely and creates a new hardcoded one from scratch. I can make JS version also behave like TS version but in case of a possible config change by next.js team, both versions will be affected instead of only the TS version.

One thing that look weird is that we do not pass --js or --ts to create-next-app

workers-sdk/packages/create-cloudflare/templates/next/c3.ts

Line 27 in 6c2e943

await runFrameworkGenerator(ctx, [projectName]);

We don't need that, user decides that during next-cli prompt

vicb · 2025-01-22T07:44:01Z

We don't need that, user decides that during next-cli prompt

Thanks for the clarification here.

JS version only prepends some code to existing config while TS version removes the existing one completely and creates a new hardcoded one from scratch. I can make JS version also behave like TS version but in case of a possible config change by next.js team, both versions will be affected instead of only the TS version.

Could you expand on why the TS config would need to be fully replaced? (maybe add the generated TS config + explanation to the PR description). Thanks!

beratbayram · 2025-01-22T08:08:46Z

Thanks for the clarification here.

No problem

Could you expand on why the TS config would need to be fully replaced? (maybe add the generated TS config + explanation to the PR description). Thanks!

I've just edited the description. Please also check the conversation at the linked issue.

vicb · 2025-01-22T08:21:41Z

because C3 generates an await statement inside a .ts file which is illegal

I think we should drop the await, see:

https://github.com/cloudflare/next-on-pages/blob/2cd4c3c704a00e6b693229f1f14102abc6318d11/internal-packages/next-dev/src/index.ts#L6-L13

https://github.com/cloudflare/next-on-pages/blob/2cd4c3c704a00e6b693229f1f14102abc6318d11/internal-packages/next-dev/README.md?plain=1#L56-L59

@dario-piotrowicz what do you think?

dario-piotrowicz · 2025-01-22T10:31:05Z

because C3 generates an await statement inside a .ts file which is illegal

I think we should drop the await, see:

cloudflare/next-on-pages@2cd4c3c/internal-packages/next-dev/src/index.ts#L6-L13

cloudflare/next-on-pages@2cd4c3c/internal-packages/next-dev/README.md?plain=1#L56-L59

@dario-piotrowicz what do you think?

yeah I forgot about the awaiting not being actually necessary, yes probably removing it would be the simplest thing, I feel like awaiting the function provides a nice safety net (since we've seen that not awaiting the function is totally fine, but there is no hard guarantee about that, in theory it could no longer be true if Next.js changed how they run their dev server etc...), but since now it complicates the C3 logic here I think we might just get rid of it

beratbayram · 2025-01-22T11:45:39Z

I've reverted all of my previous work.

yeah I forgot about the awaiting not being actually necessary, yes probably removing it would be the simplest thing,

Removed await and added .catch(console.error)

it's here to try to make it extra clear to the developer that this function is only needed in development

Removed the if and improved the comment to emphasize that.

I hope it is OK now.

@vicb @dario-piotrowicz

.changeset/famous-coats-admire.md

Co-authored-by: Victor Berchet <victor@suumit.com>

vicb

LGTM, thanks for the PR and the updates!

I triggered the e2e

.changeset/famous-coats-admire.md

Co-authored-by: Victor Berchet <victor@suumit.com>

beratbayram · 2025-01-22T12:10:56Z

Thanks for your directions and your patience. It was fun to work on this.

vicb · 2025-01-23T07:27:17Z

@beratbayram it looks like the formatting is wrong, could you please run pnpm fix on the change?

beratbayram · 2025-01-23T07:36:53Z

@beratbayram it looks like the formatting is wrong, could you please run pnpm fix on the change?

done

resolves cloudflare#925

bcac3f6

beratbayram requested review from a team as code owners January 21, 2025 21:20

beratbayram changed the title ~~resolves #925~~ resolves #7665 Jan 21, 2025

fixes issue name

e306c6a

beratbayram changed the title ~~resolves #7665~~ [create-cloudflare] next.js with ts fix Jan 21, 2025

vicb reviewed Jan 22, 2025

View reviewed changes

.changeset/moody-walls-shake.md Outdated Show resolved Hide resolved

vicb reviewed Jan 22, 2025

View reviewed changes

fix(create-cloudflare): update version from major to patch

02499c1

Berat BAYRAM added 3 commits January 22, 2025 14:21

Revert last 3 commits

ce27154

fix(create-cloudflare): removed top-level await in next.config.ts

972d414

fix(create-cloudflare): typo fix

ed3f263

vicb reviewed Jan 22, 2025

View reviewed changes

.changeset/famous-coats-admire.md Outdated Show resolved Hide resolved

fix(create-cloudflare): changeset fix

c381357

vicb reviewed Jan 22, 2025

View reviewed changes

.changeset/famous-coats-admire.md Outdated Show resolved Hide resolved

beratbayram and others added 2 commits January 22, 2025 14:49

fix(create-cloudflare): Update .changeset/famous-coats-admire.md

5c00351

Co-authored-by: Victor Berchet <victor@suumit.com>

Merge branch 'cloudflare:main' into main

009ea63

vicb added the e2e Run e2e tests on a PR label Jan 22, 2025

fix(create-cloudflare): Update .changeset/famous-coats-admire.md 2

ab104ce

vicb approved these changes Jan 22, 2025

View reviewed changes

vicb reviewed Jan 22, 2025

View reviewed changes

.changeset/famous-coats-admire.md Outdated Show resolved Hide resolved

fix(create-cloudflare): Update .changeset/famous-coats-admire.md 3

aba78ee

Co-authored-by: Victor Berchet <victor@suumit.com>

beratbayram added 2 commits January 22, 2025 16:26

Merge branch 'cloudflare:main' into main

08db595

Merge branch 'main' into main

982e414

beratbayram and others added 2 commits January 23, 2025 10:34

Merge branch 'main' into main

75f5d04

fix(create-cloudflare): pnpm fix on changeset

a577775

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[create-cloudflare] next.js with ts fix #7854

[create-cloudflare] next.js with ts fix #7854

beratbayram commented Jan 21, 2025 •

edited

Loading

changeset-bot bot commented Jan 21, 2025 •

edited

Loading

beratbayram commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading

vicb Jan 22, 2025

dario-piotrowicz Jan 22, 2025

vicb Jan 22, 2025

vicb left a comment

beratbayram commented Jan 22, 2025

vicb commented Jan 22, 2025

beratbayram commented Jan 22, 2025

vicb commented Jan 22, 2025

dario-piotrowicz commented Jan 22, 2025

beratbayram commented Jan 22, 2025 •

edited

Loading

vicb left a comment

beratbayram commented Jan 22, 2025

vicb commented Jan 23, 2025

beratbayram commented Jan 23, 2025

[create-cloudflare] next.js with ts fix #7854

Are you sure you want to change the base?

[create-cloudflare] next.js with ts fix #7854

Conversation

beratbayram commented Jan 21, 2025 • edited Loading

changeset-bot bot commented Jan 21, 2025 • edited Loading

🦋 Changeset detected

beratbayram commented Jan 21, 2025 • edited Loading

github-actions bot commented Jan 21, 2025 • edited Loading

vicb Jan 22, 2025

Choose a reason for hiding this comment

dario-piotrowicz Jan 22, 2025

Choose a reason for hiding this comment

vicb Jan 22, 2025

Choose a reason for hiding this comment

vicb left a comment

Choose a reason for hiding this comment

beratbayram commented Jan 22, 2025

vicb commented Jan 22, 2025

beratbayram commented Jan 22, 2025

vicb commented Jan 22, 2025

dario-piotrowicz commented Jan 22, 2025

beratbayram commented Jan 22, 2025 • edited Loading

vicb left a comment

Choose a reason for hiding this comment

beratbayram commented Jan 22, 2025

vicb commented Jan 23, 2025

beratbayram commented Jan 23, 2025

beratbayram commented Jan 21, 2025 •

edited

Loading

changeset-bot bot commented Jan 21, 2025 •

edited

Loading

beratbayram commented Jan 21, 2025 •

edited

Loading

github-actions bot commented Jan 21, 2025 •

edited

Loading

beratbayram commented Jan 22, 2025 •

edited

Loading