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 ^^).

[email protected] 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:

• https://github.com/cypress-io/cypress/issues/27731

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

~~because [email protected] is installed.~~

[MikeMcC399]

• There is a workaround for the TypeScript issue posted in https://github.com/cypress-io/cypress/issues/27731#issuecomment-1715685684 by @dotZak which originated from https://github.com/cypress-io/cypress/issues/27448#issuecomment-1663611056 @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 https://github.com/cypress-io/cypress-docker-images/pull/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 https://github.com/cypress-io/github-action/pull/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 https://github.com/cypress-io/cypress/issues/27731 (maybe more in https://github.com/cypress-io/cypress/issues/27448)

[MikeMcC399]

@karlhorky

• right, sorry, I meant the ones I added in https://github.com/cypress-io/cypress/issues/27731 (maybe more in https://github.com/cypress-io/cypress/issues/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 [email protected] the default is now TypeScript: Yes

For both versions, if TypeScript is selected then [email protected] 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 https://github.com/cypress-io/cypress/issues/27731#issuecomment-1787155998, 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 https://github.com/cypress-io/cypress/issues/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.

[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 #27731

https://github.com/cypress-io/cypress/blob/d6f356f561a5ebdc42ee80632c2daf6990760c9d/packages/scaffold-config/src/dependencies.ts#L91-L98

[jamesopti]

Are there any updates to this? NextJS 14.1 is out and we hit this trying to upgrade.

Happy to implement suggested workarounds (we are using Typescript) but its not clear what those are from reading this thread.

[MikeMcC399]

@jamesopti

• I updated and hid some of my comments in this thread, since Cypress 13.6.3 resolved the issue https://github.com/cypress-io/cypress/issues/27731
• Are you already using Cypress 13.6.3 for your upgrade?
• Are you running E2E or Component Testing (or both)?

[jamesopti]

• Are you already using Cypress 13.6.3 for your upgrade?

Yup!

• Are you running E2E or Component Testing (or both)?

Both

[MikeMcC399]

@jamesopti

Great that you are on the latest Cypress version! Apart from the fact that Cypress says Next.js 14 is unsupported when you try to run Component Testing, did you hit any other issues?

My experience was that you don't need any TypeScript workaround anymore with Cypress 13.6.3.

[jamesopti]

Great that you are on the latest Cypress version! Apart from the fact that Cypress says Next.js 14 is unsupported when you try to run Component Testing, did you hit any other issues?

Yea, so this is the error were getting in CI. My understanding is that Cypress component testing has to reach into NextJS internals to make things work. This error suggests something around that changed

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: Failed to load "next/dist/build/webpack-config" with error: Headers is not defined
    at getNextJsPackages (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:43:15)
    at loadWebpackConfig (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:1[77](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:78):96)
    at nextHandler (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:12:33)
    at getPreset (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:92:56)
    at Function.devServer.create (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:67)
    at /home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:40
    at new Promise (<anonymous>)
    at devServer (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:24:12)
    at Object.handler (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:166:24)
    at invoke (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:1[85](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:86):18)
    at /home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/dev-server.js:18:8)
    at RunPlugins.execute (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:155:26)
    at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:4[89](https://github.com/gamma-app/gamma/actions/runs/7577358478/job/20637999871#step:9:90):12)
    at process.<anonymous> (/home/runner/.cache/Cypress/13.6.3/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:22)
    at process.emit (node:events:513:28)
    at process.emit (node:domain:489:12)
Test run failed, code 1
More information might be available above
Cypress module has returned the following error message:
Could not find Cypress test run results
Error: Could not find Cypress test run results

[MikeMcC399]

@jamesopti

Thanks for sharing your concrete error trace!

The Cypress.io team would need to respond about their plans to support Next.js 14. I can't see any mention of it on the Cypress App Priorities dashboard.

[jamesopti]

The Cypress.io team would need to respond about their plans to support Next.js 14. I can't see any mention of it on the Cypress App Priorities dashboard.

Yea looks like it was added and quickly removed :(

[jennifer-shehane]

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.

[GRA0007]

I wanted to share my experience using Next 14 in case it helps anyone looking into this. We've got e2e and component tests, and when running them locally with Next.js 14.1.0 and Cypress 13.3.2 on Node 18.17.0, we have no issues at all with e2e or component tests (aside from the warning in the Cypress UI of course). My operating system is macOS Sonoma 14.1.1.

The issue occurs for us when we try and run specifically component tests in CI on GitHub actions, which appears to be running Node 18.19.1, on Ubuntu 22.04.4. The following is a log of what Cypress gives us when trying to run the component tests, similar to the log James shared above.

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Error: Failed to load "next/dist/build/webpack-config" with error: Headers is not defined
    at getNextJsPackages (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:43:15)
    at loadWebpackConfig (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:177:96)
    at nextHandler (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/helpers/nextHandler.js:12:33)
    at getPreset (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:92:56)
    at Function.devServer.create (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:111:67)
    at /home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:26:40
    at new Promise (<anonymous>)
    at devServer (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/node_modules/@cypress/webpack-dev-server/dist/devServer.js:24:12)
    at Object.handler (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_require_async_child.js:166:24)
    at invoke (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:183:18)
    at /home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:59:14
    at tryCatcher (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/bluebird/js/release/util.js:16:23)
    at Function.Promise.attempt.Promise.try (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/bluebird/js/release/method.js:39:29)
    at Object.wrapChildPromise (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:58:23)
    at Object.wrap (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/dev-server.js:18:8)
    at RunPlugins.execute (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:155:26)
    at EventEmitter.<anonymous> (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/child/run_plugins.js:56:12)
    at EventEmitter.emit (node:events:513:28)
    at EventEmitter.emit (node:domain:489:12)
    at process.<anonymous> (/home/runner/.cache/Cypress/13.3.2/Cypress/resources/app/node_modules/@packages/server/lib/plugins/util.js:33:[22](https://github.com/###/actions/runs/###/job/####step:8:23))
    at process.emit (node:events:513:[28](https://github.com/###/actions/runs/###/job/####step:8:29))
    at process.emit (node:domain:489:12)

Of course, it looks like some people are having issues running e2e tests with Next 14 as well, but this is just what we've experienced.

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