add next 12.x support to @cypress/react

[glomotion]

What would you like?

We would like @cypress/react to support nextjs 12.x

Why is this needed?

We'd like to be able to upgrade to nextjs 12.x - in order to take advantage of the new middleware API. Sadly though, it looks like @cypress/react is not quite ready to support nextjs 12.x atm.

Other

No response

[lmiller1990]

Sorry for the slow reply. We will spend some time to investigate updating cypress/react to work with Next.js 11 and the new React 18 APIs in the near future.

Do you know what is involved in this? I haven't looked at the new middleware API yet.

[gusgard]

I know cypress/react is working well with Next.js 10 and 11 but on 12 if fails because of a webpack issue

yarn run v1.22.17
$ cypress run-ct
It looks like this is your first time using Cypress: 9.6.1

✔  Verified Cypress! /Users/.../Library/Caches/Cypress/9.6.1/Cypress.app

Opening Cypress...
<i> [webpack-dev-server] Project is running at:
<i> [webpack-dev-server] Loopback: http://localhost:8080/, http://127.0.0.1:8080/
<i> [webpack-dev-server] Content not from webpack is served from '/Users/.../Desktop/cypress testing/with-cypress-app-nextjs-12/public' directory

====================================================================================================

  (Run Starting)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Cypress:        9.6.1                                                                          │
  │ Browser:        Electron 94 (headless)                                                         │
  │ Node Version:   v14.19.0 (/usr/local/Cellar/node@14/14.19.0_1/bin/node)                        │
  │ Specs:          1 found (lala.spec.tsx)                                                        │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


────────────────────────────────────────────────────────────────────────────────────────────────────
                                                                                                    
  Running:  lala.spec.tsx                                                                   (1 of 1)
assets by path static/chunks/*.js 7.61 KiB
  asset static/chunks/cypress_support_index_js.js 3.94 KiB [emitted]
  asset static/chunks/spec-0.js 3.67 KiB [emitted] (name: spec-0)
asset main.js 13.9 KiB [emitted] (name: main)
asset index.html 391 bytes [emitted]
cached modules 2.09 KiB [cached] 7 modules
runtime modules 2.32 KiB 7 modules
./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js 934 bytes [not cacheable] [built]
client (webpack 5.72.0) compiled successfully in 326 ms


  1) An uncaught error was detected outside of a test

  0 passing (235ms)
  1 failing

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

  > require is not defined

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.

We dynamically generated a new test to display this failure.
      at Object.__webpack_require__.f.require (http://localhost:8080/__cypress/src/main.js:194:15)
      at http://localhost:8080/__cypress/src/main.js:133:40
      at Array.reduce (<anonymous>)
      at Function.__webpack_require__.e (http://localhost:8080/__cypress/src/main.js:132:67)
      at loadSupportFile (webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js:2:51)
      at http://localhost:8080/__cypress/runner/cypress_runner.js:203384:86
      at tryCatcher (http://localhost:8080/__cypress/runner/cypress_runner.js:26302:23)
      at Object.gotValue (http://localhost:8080/__cypress/runner/cypress_runner.js:25444:18)
      at Object.gotAccum (http://localhost:8080/__cypress/runner/cypress_runner.js:25433:25)
      at Object.tryCatcher (http://localhost:8080/__cypress/runner/cypress_runner.js:26302:23)




  (Results)

  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ Tests:        1                                                                                │
  │ Passing:      0                                                                                │
  │ Failing:      1                                                                                │
  │ Pending:      0                                                                                │
  │ Skipped:      0                                                                                │
  │ Screenshots:  1                                                                                │
  │ Video:        false                                                                            │
  │ Duration:     0 seconds                                                                        │
  │ Spec Ran:     lala.spec.tsx                                                                    │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘


  (Screenshots)

  -  /Users/.../Desktop/cypress testing/with-cypress-app-nextjs-12/cypress/screensh     (1280x720)
     ots/lala.spec.tsx/An uncaught error was detected outside of a test (failed).png                


====================================================================================================

  (Run Finished)


       Spec                                              Tests  Passing  Failing  Pending  Skipped  
  ┌────────────────────────────────────────────────────────────────────────────────────────────────┐
  │ ✖  lala.spec.tsx                            230ms        1        -        1        -        - │
  └────────────────────────────────────────────────────────────────────────────────────────────────┘
    ✖  1 of 1 failed (100%)                     230ms        1        -        1        -        -  

error Command failed with exit code 1.

@lmiller1990 do you have an idea where the problem might be? (which cypress library)

[gearsdigital]

It's been a while but I would like to draw some attention here. I created an example repo which outlines the issue.

https://github.com/gearsdigital/cypress-next-19382

I'm using Cypress 9.6.1 and next.js 12.1.6. It seems related to fact that nextjs switched to webpack 5.

at Object.__webpack_require__.f.require (http://localhost:8080/__cypress/src/main.js:194:16)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:133:41)
        at Array.reduce (<anonymous>)
    at Function.__webpack_require__.e (http://localhost:8080/__cypress/src/main.js:132:68)
    at loadSupportFile ([webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js:2:52](http://localhost:8080/__/#))
    at <unknown> (http://localhost:8080/__cypress/runner/cypress_runner.js:182065:46)
From previous event:
    at Object.runScripts (http://localhost:8080/__cypress/runner/cypress_runner.js:182065:22)
    at $Cypress.onSpecWindow (http://localhost:8080/__cypress/runner/cypress_runner.js:171016:19)
    at init ([webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/aut-runner.js:10:14](http://localhost:8080/__/#))
    at eval ([webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js:19:4](http://localhost:8080/__/#))
    at Object../node_modules/@cypress/webpack-dev-server/dist/loader.js!./node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:8080/__cypress/src/main.js:40:2)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:88:43)
    at render ([webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/browser.js:3:6](http://localhost:8080/__/#))
    at eval ([webpack-internal:///./node_modules/@cypress/webpack-dev-server/dist/browser.js:5:2](http://localhost:8080/__/#))
    at Object../node_modules/@cypress/webpack-dev-server/dist/browser.js (http://localhost:8080/__cypress/src/main.js:30:2)
    at __webpack_require__ (http://localhost:8080/__cypress/src/main.js:88:43)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:211:38)
    at <unknown> (http://localhost:8080/__cypress/src/main.js:214:13)

[gearsdigital]

After some fiddling it seems to break only in nextjs 12.1.6 and upwards. 12.1.5 and below works fine so far.

vercel/next.js@v12.1.5...v12.1.6

Only 559 files have changed 😵‍💫

[yudielcurbelo]

After some fiddling it seems to break only in nextjs 12.1.6 and upwards. 12.1.5 and below works fine so far.

vercel/next.js@v12.1.5...v12.1.6

Only 559 files have changed 😵‍💫

Same here.

[lmiller1990]

The latest Next.js (v12.1.6) is broken with Cypress right now (it just came out a few days ago).

We have a ticket for this in our internal planning and someone will fix it, probably next week. Please wait a little. If anyone knows what broke and how to fix it, please let me know, otherwise I will just go over the 559 files that changed and find out.

In the meantime, the only real option is to use Next.js 12.1.5. Sorry about the inconvenience; Next.js is a fast moving target!

[leerob]

Hey there! Sorry about this – would this happen to be related to vercel/next.js#36794?

[lmiller1990]

Hi @leerob - thanks for the clue. It could well be, I need to spend a few hours digging into this. I'll start by running Cypress again the commit prior to that one, and see if it's working as expected. I will post my findings here.

cc @ZachJW34, the discussion in #36794 might be useful!

[Brooooooklyn]

Hey @gearsdigital , I can't reproduce your error in https://github.com/gearsdigital/cypress-next-19382

• npm ci
• Add <Link href="/about">about</Link> into pages/index.js, you have an assert rely on it
• npm run e2e

[gearsdigital]

@Brooooooklyn Thanks for verfying! You need to run cypress in component test mode. I checked my example myself and I still can reproduce the behaviour.

My steps:

1. git clone git@github.com:gearsdigital/cypress-next-19382.git
2. npm ci
3. npx cypress open-ct

open-ct is important here because it will set the cypress TestingType to component.

[gearsdigital]

Next.js is a fast moving target!

Absolutely.

Thank you very very much @lmiller1990 for taking care. Same to @leerob for jumping in.

[ZachJW34]

Looks like the API for getNextJsBaseWebpackConfig has changed from v12.1.5 to v12.1.6 which is the API we rely on to grab the Next webpack config. Quick test changing isServer: false to compilerType: 'client' here seems to fix the issue. Will pick this up at the beginning of next week, hopefully is as straightforward as it seems and if so we'll have this fixed soon.

[cypress-bot]

The code for this is done in cypress-io/cypress#21516, but has yet to be released.
We'll update this issue and reference the changelog when it's released.

[ZachJW34]

This was released in @cypress/react@5.12.5!

[cypress-bot]

Released in 10.0.0.

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