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.

[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)

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

[theonlydaleking]

FWIW when I updated to 14 I'm now faced with this when trying to set up component testing.

[MikeMcC399]

@theonlydaleking

You can click on Skip to ignore the check, however whether it will work or not depends on how Next.js has been installed. See other comments in this thread.

[nickserv]

Can we please rename/update this issue/warning to clarify it's an incompatibility that only affects TypeScript projects? Alternatively, it could be marked as a duplicate of #27731 if the warning is fixed or considered complete.

I understand this is a common issue since TypeScript is enabled by default, but there are workarounds, and it takes a bit of reading to understand what's supported.

[MikeMcC399]

@nickmccurdy

Alternatively, it could be marked as a duplicate of #27731 if the warning is fixed or considered complete.

• Although the two issues are related, this one is not a duplicate, since to resolve it, it would need a change to the supported version of Next.js for CT, which is not covered by Unable to compile TypeScript with "moduleResolution": "bundler" option in v5 #27731

cypress/packages/scaffold-config/src/dependencies.ts

Lines 91 to 98 in d6f356f

	export const WIZARD_DEPENDENCY_NEXT = {
	type: 'next',
	name: 'Next',
	package: 'next',
	installer: 'next',
	description: 'The React Framework for Production',
	minVersion: '^10.0.0 || ^11.0.0 || ^12.0.0 || ^13.0.0',
	} as const

[jamesopti]

@GRA0007 Thanks so much for this detail! We are indeed using a different/newer node version (v18.18.2)

I'm going to try both 18.17.0 as well as moving up to 20.9.0

[randreu28]

Any updates? Is it safe to use cypress with next.js 14? It's been a couple months since the next.js 14 release... ):

[JuicyBenjamin]

Any updates? Is it safe to use cypress with next.js 14? It's been a couple months since the next.js 14 release... ):

I'm getting warnings and errors so I'd wager it's probably not viable yet. I really do hope they will support it soon. It's been six months already. I've had to look into other solutions in the mean time. Ie. other test libraries, currently attempting with vitest but I'd much rather just stick with cypress. Btw my use case is for component testing with server components and server actions.

[anuraags]

This is also a blocker for me to introduce cypress into my org as we use the latest nextjs, and are getting the same error when trying component testing.

[adrianstanek]

I have the same issue when starting in the default environment with node 16. All tests work when I switch to node 18 (nvm use 18) in "open" and "run" ✅

Note: I still get the warning that the next 14 isn't on the compatibility list.

Starting in a terminal with node 16:

Starting in a terminal with node 18:

[MikeMcC399]

@adrianstanek

Next.js specifies a minimum of Node.js 18.17. See also Next.js 14 blog > Other Changes.

The minimum Node.js version for Cypress is 18.x - see Cypress > System Requirements.

Node.js 16 reached end-of-life on Sep 11, 2023 so it should normally not be the "default" anywhere anymore.

[adrianstanek]

@MikeMcC399 true. A colleague whose pipeline still ran in node 16 had this problem, and we updated it to make it work. This thread tackles two different problems and it's not obvious at first. Which is the reason I posted it that way.

[sirTangale]

works fine
both component and e2e test with versions nextjs 14 + , node 18 + cypress 13.6 +

[JuicyBenjamin]

Async server components and server actions are not supported. I think both of these needs to be addressed before cypress can say they support next 14.

[sirTangale]

Yes, Async server components are the problem. However, Async server components are not supported by any of the test frameworks suggested by NEXT in its documentation. It recommends using E2E tests for Async server components.
My best bet would be to use E2E and component tests using Cypress, and for unit tests, I would consider either Vitest or Jtest.

[petewarman]

Would it be possible to update the docs to make it clear what is and is not supported with NextJS 14 please? https://docs.cypress.io/guides/component-testing/react/overview#Nextjs-Caveats

[MikeMcC399]

@petewarman

Would it be possible to update the docs to make it clear what is and is not supported with NextJS 14 please? https://docs.cypress.io/guides/component-testing/react/overview#Nextjs-Caveats

• Also commented in CT Supported Frameworks with wildcard "+" version cypress-documentation#5412 (comment)

[jamesopti]

NextJS 14 was now released 6 months ago, and NextJS 14.2 was released yesterday.

Is there any official update from the Cypress team on when v14 will be supported?

It's interesting that this doesn't seem to be a higher priority given the popularity of Vercel & NextJS.

[Luke-Gurgel]

I'm able to run e2e tests but still having issues with component tests with Next v14 and Cypress v13. I've tried using Node v18 and v20 and I still get the following errors consistently:

CypressError: `cy.mount()` must be implemented by the user. There are
full instructions for doing so at the following location.

 1) An uncaught error was detected outside of a test:
     TypeError: The following error originated from your test code, not from Cypress.

  > Cannot read properties of null (reading 'parentNode')

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

I'm using css modules, I have a very simple app with just 1 page and a simple form in it. I tried adding <div data-cy-root id="__next_css__DO_NOT_USE__"></div> to the cypress/support/component-index.html file and that made the 2nd error disappear.

[jamesopti]

The typescript PR we merged was to address the issue with Next.js 14 and E2E. We intend to support Next.js 14 for Component Testing and are open to PRs that get that closer. It is on our prioritized list of things to do, but no one is actively looking at it this sprint.

@jennifer-shehane Any updates here? It's quite frustrating to have no timetable of when developers can expect to be able to upgrade to NextJS 14 after 6 months now.

[jennifer-shehane]

@jamesopti We're planning to prioritize this after the Vite 5 support work goes in, which has a PR in review now. #28347

[DavidChouinard]

@jennifer-shehane super exciting thank you!

[jennifer-shehane]

PR is in review for supporting Next.js 14: #29558

There is a separate issue opened for those interested in Server Component Support in CT testing, for anyone interested in that - please show interest in that issue. #29552

[cypress-bot]

Released in 13.11.0.

This comment thread has been locked. If you are still experiencing this issue after upgrading to
Cypress v13.11.0, please open a new issue.