Add support of Next.JS 14

[wajdikhattel]

What would you like?

Next.JS 14 was recently released: https://nextjs.org/blog/next-14

Currently cypress does not support that version, as you can see in the picture below

I request adding support of Next.JS 14

Why is this needed?

No response

Other

No response

[MikeMcC399]

Updating the Next.js 13 example in https://github.com/cypress-io/cypress-component-testing-apps/tree/main/react-next13-ts using

npm i next@latest react@latest react-dom@latest eslint-config-next@latest

to Next.js 14 then running

npx cypress run --component

runs successfully and warns about compatibility (corresponding to the message in the original post above ^^).

typescript@4.9.5 is used.

---

A fresh installation of Next.js 14.0.1 taking defaults from

npx create-next-app

suffers from the unresolved issue which previously failed, is now working in Cypress 13.6.3 after the following issue was resolved:

• Unable to compile TypeScript with "moduleResolution": "bundler" option in v5 #27731

> TSError: ⨯ Unable to compile TypeScript:
error TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

because typescript@5.2.2 is installed.

[MikeMcC399]

• There is a workaround for the TypeScript issue posted in Unable to compile TypeScript with "moduleResolution": "bundler" option in v5 #27731 (comment) by @dotZak which originated from Next.js + TS not working out of the box #27448 (comment) @karlhorky.

• The question is whether Cypress can claim compatibility with Next.js 14 for Component Testing even though a TypeScript workaround is required to run it.

[JackHowa]

What would you like?

Next.JS 14 was recently released: https://nextjs.org/blog/next-14

Currently cypress does not support that version, as you can see in the picture below

I request adding support of Next.JS 14

Why is this needed?

No response

Other

No response

Definitely agree. I created cypress-io/cypress-docker-images#989 to support this for us using the latest 18.x version. Let me know if there's someone who can help merge this in

@wajdikhattel

[MikeMcC399]

• I've submitted chore(deps): update nextjs example to v14 github-action#1071 to update the Next.js E2E example in cypress-io/github-action and there doesn't seem to be any problem about the compatibility for E2E testing with Next.js 14 in this simple example.
• The compatibility between Cypress and Next.js 14 is only an issue for Component Testing.

[karlhorky]

• The compatibility between Cypress and Next.js 14 is only an issue for Component Testing.

This is not true for our apps. End to end testing is also failing.

I provided some reproductions above, but if they are not enough, I can try to find the time to make more reproductions.

But to be clear, this is not only affecting Component Testing.

[MikeMcC399]

@karlhorky

This is not true for our apps. End to end testing is also failing.

Many thanks for your feedback and so I've deleted my statement.

I couldn't see any reproductions from you in this thread. Maybe you could describe example errors you're seeing?

[karlhorky]

I couldn't see any reproductions from you in this thread

right, sorry, I meant the ones I added in #27731 (maybe more in #27448)

[MikeMcC399]

@karlhorky

• right, sorry, I meant the ones I added in Unable to compile TypeScript with "moduleResolution": "bundler" option in v5 #27731 (maybe more in Next.js + TS not working out of the box #27448)

Thanks for the clarification! I checked using

npx create-next-app@13
npx create-next-app@14

and I confirmed that the default for TypeScript changed from no (@13) to yes (@14).
Edit: in create-next-app@13.5.6 the default is now TypeScript: Yes

For both versions, if TypeScript is selected then typescript@5.2.2 is installed and this causes the following error when Cypress is run

TS5095: Option 'bundler' can only be used when 'module' is set to 'es2015' or later.

So this is not a new compatibility issue for Next.js 14, since it already exists in Next.js 13. Nevertheless, as I commented in #27731 (comment), it still needs to be resolved. Now that TypeScript is the default in Next.js 14 the impact has increased compared to Next.js 13.

• Edit: The above comments are outdated, since Unable to compile TypeScript with "moduleResolution": "bundler" option in v5 #27731 was resolved in Cypress 13.6.3

[karlhorky]

Right yeah, to be clear, it's also a problem for any other TypeScript projects (non-Next.js projects) using "moduleResolution": "bundler" (maybe also other configurations like "Node16" and "NodeNext", I haven't checked).

[MikeMcC399]

The demo E2E Next.js 14 project is now merged into
https://github.com/cypress-io/github-action/tree/master/examples/nextjs

This example does not cause a problem because it does not use TypeScript. It is based on following the instructions in

Create a Next.js App

that uses the following command to create the Next.js demo project:

npx create-next-app@latest nextjs-blog --use-npm --example "https://github.com/vercel/next-learn/tree/main/basics/learn-starter"

[karlhorky]

Yeah, the issues described above are about Next.js TypeScript projects.