Skip to content

Page Router with Next 14 and 'use client' does not work with cypress 12.3.0 #58061

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Closed
1 task done
eduardo-villasboas opened this issue Nov 5, 2023 · 4 comments
Closed
1 task done

Page Router with Next 14 and 'use client' does not work with cypress 12.3.0 #58061

eduardo-villasboas opened this issue Nov 5, 2023 · 4 comments
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.

Comments

@eduardo-villasboas
Copy link

eduardo-villasboas commented Nov 5, 2023 •
edited
Loading

Link to the code that reproduces this issue

https://github.com/eduardo-villasboas/with-cypress-app

I am getting the error when running next with cypress.

To Reproduce

There are two manners to reproduces the error

Using https://www.npmjs.com/package/start-server-and-test

  1. Run npm run e2e:headless this command will start next in dev mode and run e2e tests using https://www.npmjs.com/package/start-server-and-test

Running next server manually

  1. rm .next -rf
  2. rm node_modules/ -rf
  3. npm install
  4. npm run build
  5. npm run dev
  6. and in another terminal npx cypress run --e2e

***Note that the errors don't happen always and in the second approach, running manually I got the error in the first executions after deleting the paths .next and node_modules/. In the repo https://github.com/eduardo-villasboas/with-cypress-app, I create two branches next-14-with-app-routing-error-tests and next-14-with-pages-routing-sucess-tests, because I have discovered this error occurs only when using the new nextjs routing system and accessing an component using 'use client' ***

Current vs. Expected behavior

Test app.cy.ts should pass

But I getting the following error. I am attaching a video that the own cypress have recorded.

  1) Navigation
       should navigate to the about page:
     TypeError: The following error originated from your application code, not from Cypress.

  > __webpack_require__.n is not a function

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

This behavior is configurable, and you can choose to turn this off by listening to the `uncaught:exception` event.

https://on.cypress.io/uncaught-exception-from-application
      at eval (webpack-internal:///app-pages-browser/./app/about/page.tsx:7:108)
      at <unknown> (app-pages-browser/./app/about/page.tsx http://localhost:3000/_next/static/chunks/app/about/page.js:38:1)
      at options.factory (http://localhost:3000/_next/static/chunks/webpack.js?v=1699211960328:704:31)
      at __webpack_require__ (http://localhost:3000/_next/static/chunks/webpack.js?v=1699211960328:37:33)
      at fn (http://localhost:3000/_next/static/chunks/webpack.js?v=1699211960328:359:21)
      at requireModule (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:156:23)
      at initializeModuleChunk (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1357:17)
      at resolveModuleChunk (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1302:5)
      at eval (webpack-internal:///app-pages-browser/./node_modules/next/dist/compiled/react-server-dom-webpack/cjs/react-server-dom-webpack-client.browser.development.js:1774:14)
app.cy.ts.mp4

Verify canary release

  • I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: linux
  Arch: x64
  Version: #26~22.04.1-Ubuntu SMP PREEMPT_DYNAMIC Thu Jul 13 16:27:29 UTC 2
Binaries:
  Node: 20.9.0
  npm: 10.1.0
  Yarn: N/A
  pnpm: N/A
Relevant Packages:
  next: 14.0.2-canary.12
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.2.2
Next.js Config:
  output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

I see that this issue only occurs when using the app router and it happened because webpack.js sometimes doesn't finish its execution until the test access the function webpack_require.n.

I am not sure if this is a Nextjs issue or Cypress issue, but it works with the same version using the page router, therefore I am opening this issue.
@eduardo-villasboas eduardo-villasboas added the bug Issue was opened via the bug report template. label Nov 5, 2023
@eduardo-villasboas eduardo-villasboas changed the title Next 14 does not work with cypress 12.3.0 Page Router with Next 14 and 'use client' does not work with cypress 12.3.0 Nov 5, 2023
@Nayeem-XTREME
Copy link
Contributor

&larr; Go Back</Link> </p> </main> </div> ) }">
'use client'
import Link from 'next/link'
import styles from '../../styles/Home.module.css'
import { usePathname } from 'next/navigation'

export default function About() {
  const route = usePathname();
  return (
    <div className={styles.container}>
      <main className={styles.main}>
      <h1>About Page</h1>
      <h2>route {route}</h2>
      <p className={styles.description}>
        <Link href="/">&larr; Go Back</Link>
      </p>
      </main>
    </div>
  )
}

In pages directory, there is no effect of using use client directive. Also, instead of using usePathname, try to use useRouter because that is meant to be used inside the app router. You can try the following code:

&larr; Go Back</Link> </p> </main> </div> ) }">
import Link from 'next/link'
import styles from '../../styles/Home.module.css'
import { useRouter } from 'next/router'

export default function About() {
  const router = useRouter();
  return (
    <div className={styles.container}>
      <main className={styles.main}>
      <h1>About Page</h1>
      <h2>route {router.pathname}</h2>
      <p className={styles.description}>
        <Link href="/">&larr; Go Back</Link>
      </p>
      </main>
    </div>
  )
}

@eduardo-villasboas
Copy link
Author

eduardo-villasboas commented Nov 12, 2023 •
edited
Loading

I have read in Next docs the new form to get the current route is using bash import { usePathname } from 'next/navigation'
. In fact, I get these two errors when using the code with useRouter and without 'use client' respectively

image
image

@nextjs-bot
Copy link
Collaborator

This issue has been automatically marked as stale due to two years of inactivity. It will be closed in 7 days unless there’s further input. If you believe this issue is still relevant, please leave a comment or provide updated details. Thank you.

@nextjs-bot nextjs-bot added the stale The issue has not seen recent activity. label May 10, 2025
@nextjs-bot
Copy link
Collaborator

This issue has been automatically closed due to two years of inactivity. If you’re still experiencing a similar problem or have additional details to share, please open a new issue following our current issue template. Your updated report helps us investigate and address concerns more efficiently. Thank you for your understanding!

@nextjs-bot nextjs-bot closed this as not planned Won't fix, can't repro, duplicate, stale May 18, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
bug Issue was opened via the bug report template. stale The issue has not seen recent activity.
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@Nayeem-XTREME @eduardo-villasboas @nextjs-bot