Next.js with Cypress example cannot build

[mikkel-ol]

Verify canary release

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

Provide environment information

Operating System:
      Platform: win32
      Arch: x64
      Version: Windows 10 Enterprise
    Binaries:
      Node: 18.16.0
      npm: N/A
      Yarn: N/A
      pnpm: N/A
    Relevant packages:
      next: 13.4.4-canary.8
      eslint-config-next: N/A
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 4.7.4

Which example does this report relate to?

with-cypress

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Next cannot build due to test files being present in pages/

Expected Behavior

Should be able to build given example

To Reproduce

npx create-next-app@latest --example with-cypress with-cypress-app
cd with-cypress-app
npm run build

[ciruz]

Confirm:

npm run build

> build
> next build

- info Linting and checking validity of types
- info Creating an optimized production build
- info Compiled successfully
- info Collecting page data ..ReferenceError: describe is not defined
    at 9785 (D:\dev\node\with-cypress-app\.next\server\pages\about.cy.js:20:1)
    at __webpack_require__ (D:\dev\node\with-cypress-app\.next\server\webpack-runtime.js:25:42)
    at __webpack_exec__ (D:\dev\node\with-cypress-app\.next\server\pages\about.cy.js:111:39)
    at D:\dev\node\with-cypress-app\.next\server\pages\about.cy.js:112:74
    at __webpack_require__.X (D:\dev\node\with-cypress-app\.next\server\webpack-runtime.js:108:21)
    at D:\dev\node\with-cypress-app\.next\server\pages\about.cy.js:112:47
    at Object.<anonymous> (D:\dev\node\with-cypress-app\.next\server\pages\about.cy.js:115:3)
    at Module._compile (node:internal/modules/cjs/loader:1159:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1213:10)
    at Module.load (node:internal/modules/cjs/loader:1037:32)

> Build error occurred
Error: Failed to collect page data for /about.cy
    at D:\dev\node\with-cypress-app\node_modules\next\dist\build\utils.js:1152:15
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5) {
  type: 'Error'
}
- info Collecting page data .

Because of the about.cy.tsx inside the /pages folder.
https://github.com/vercel/next.js/blob/canary/examples/with-cypress/pages/about.cy.tsx

[moaz178]

Are you using any third party plugins in your next.js project?. There can be conflicting areas in version matching as well.

[ciruz]

Are you using any third party plugins in your next.js project?. There can be conflicting areas in version matching as well.

Hey @moaz178, no the problem is that the Component Testfile (about.cy.tsx) is placed inside the /pages directory and Next.js handles this file as regular page (/about.cy) during build. This is the regular build process, if you place a file in this directory, it's automatically a page.

If you place a sitemap.xml.tsx inside the /pages directory, Next.js will build a sitemap.xml file for you, nothing wrong with that.

The example is just not right. I already changed the example and made a PR, but it's not merged. #50303

[github-actions]

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.