search

cypress-io / cypress

Fast, easy and reliable testing for anything that runs in a browser.
https://cypress.io
MIT License
46.72k stars 3.16k forks source link

Add support of Next.JS 14 #28185

Closed wajdikhattel closed 3 months ago

wajdikhattel commented 10 months ago

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

image

I request adding support of Next.JS 14

Why is this needed?

No response

Other

No response

MikeMcC399 commented 10 months ago

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:

> 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 commented 10 months ago
JackHowa commented 10 months ago

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

image

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 commented 10 months ago
karlhorky commented 10 months ago
  • 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 commented 10 months ago

@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 commented 10 months ago

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 commented 10 months ago

@karlhorky

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

karlhorky commented 10 months ago

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 commented 10 months ago

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 commented 10 months ago

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

theonlydaleking commented 9 months ago

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

Screenshot 2023-12-19 at 6 38 11 am
MikeMcC399 commented 9 months ago

@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 commented 9 months ago

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 commented 9 months ago

@nickmccurdy

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

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

jamesopti commented 8 months ago

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 commented 8 months ago

@jamesopti

jamesopti commented 8 months ago
  • Are you already using Cypress 13.6.3 for your upgrade?

Yup!

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

Both

MikeMcC399 commented 8 months ago

@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 commented 8 months ago

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 commented 8 months ago

@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 commented 8 months ago

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 :(

Screen Shot 2024-01-22 at 10 55 11 AM
jennifer-shehane commented 8 months ago

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 commented 7 months ago

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 commented 7 months ago

@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 commented 6 months ago

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 commented 6 months ago

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 commented 5 months ago

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 commented 5 months ago

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:

image

Starting in a terminal with node 18:

image
MikeMcC399 commented 5 months ago

@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 commented 5 months ago

@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 commented 5 months ago

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

JuicyBenjamin commented 5 months ago

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 commented 5 months ago

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 commented 4 months ago

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 commented 4 months ago

@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

jamesopti commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

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 commented 4 months ago

@jamesopti We're planning to prioritize this after the Vite 5 support work goes in, which has a PR in review now. https://github.com/cypress-io/cypress/issues/28347

DavidChouinard commented 4 months ago

@jennifer-shehane super exciting thank you!

jennifer-shehane commented 3 months ago

PR is in review for supporting Next.js 14: https://github.com/cypress-io/cypress/pull/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. https://github.com/cypress-io/cypress/issues/29552

cypress-bot[bot] commented 3 months ago

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.