Component testing with Next JS 13.4 no longer works after migrating to the "app router" directory structure

[Phishyq]

Current behavior

The latest release of Next JS https://nextjs.org/blog/next-13-4 includes a change to the recommended folder structure, and removes the previous "pages" directory. This is no longer compatible with the next framework helper built into Cypress, resulting in compilation errors.

The symptoms seem to be identical to #17898, where Cypress previously failed to correctly locate the pages directory.
Same syntax error:
Syntax error: Using `export * from '...'` in a page is disallowed.

I believe the cause for this is https://github.com/cypress-io/cypress/blob/develop/npm/webpack-dev-server/src/helpers/nextHandler.ts#L264 where Cypress expects the pages directory to exist at one of either /pages or /src/pages. It's possible that adding /app as a possible option would also resolve the issue, but I haven't been able to verify this.

The project already had Cypress (specifically component tests) implemented and configured, but it stopped working after migrating to the Next JS app router setup. The workaround I found was to simply create an empty /pages directory in the project, this immediately solved the compilation errors, but obviously shouldn't be necessary.

Desired behavior

Cypress should correctly handle the lack of a /pages directory within a Next JS application since this is now the recommended folder structure.

Test code to reproduce

I can't currently provide a repo

Cypress Version

latest

Node version

18.x

Operating System

Ubuntu

Debug Logs

No response

Other

No response

[MikeMcC399]

• I added a feature request to Request for example of Next.js 13 with App Router cypress-component-testing-apps#17 since App Router is now the default when executing npx create-next-app@latest.

[MikeMcC399]

@Phishyq

I was able to successfully run Cypress 12.12.0 component testing on a Next.js project set up with create-next-app 13.4.3 and the default choice of "App Router". So apparently the issue is not that Cypress is generally incompatible with Next.js 13.4 / App Router.

I would guess that a reproducible example would need to be shared in order for this to be investigated further.

[marktnoonan]

My experience was the same as Mikes, a reproduction would be really helpful here. Even with /app or /src/app structure I didn't have a problem creating component tests and running them.

That said, it would make sense to catch up our code to match the latest Next.js practices.

[warrensplayer]

Right now there doesn't seem to be enough information to reproduce the problem on our end. We'll have to close this issue until we can reproduce it. This does not mean that your issue is not happening - it just means that we do not have a path to move forward.

Please open a new issue with a reproducible example and link to this issue. Here are some tips for providing a Short, Self Contained, Correct, Example and our own Troubleshooting Cypress guide.

[raphaelbadia]

I'm coming from #17898

For anyone having this issue after migrating from the pages dir to the appdir, we had the same problem and found out that the error message was caused by a barrel file in our app directory.

// forms.ts
export * from './field';
export * from './form';
export * from './input';
export * from './dropzone';
export * from './select';
export * from './color-picker';
export * from './checkbox';

We were using it like this :

import { Field, Input } from '../../forms';

We've deleted the barrel file and now import files like this :

import { Field } from '../../forms/field';
import { Input } from '../../forms/input';

[cwillsea-mtg]

Here is a working repro for the export * issue

https://github.com/cwillsea-mtg/cypress-next-export-star-repro

If you run npm run test and open the only test file, it should show this error:

As noted above, this error can be bypassed by either creating an empty /pages directory OR by converting those export * declarations into specific named exports.

[amplicity]

I'm getting a similar issue with the app directory, I don't believe it's exactly the same tho. We're using Next 13.4.7. I've tried creating an empty /pages but it did not fix the issue. I also tried installing the dependency noted but, it looks like that requires React 17, to which we are on 18. I'm assuming this is an issue because Next 13.4 uses Turbopack instead of webpack.

Is there a workaround here?

[angusclarkdev]

I can confirm that this issue is still happening and seems to be related to barrel exports with import * from ... syntax. Adding an empty /pages folder was a temporary work around for us. We're using next 13.5.6 and cypress 13.4.0

[alamenai]

Any updates regarding this issue?

[petejodo]

confirmed adding an empty pages directory works but an interesting side effect of that is that it impacts next-env.d.ts as the additional declaration file next/navigation-types/compat/navigation gets automatically added by next. This causes a bunch of typescript errors to occur for me since it impacts search params. So adding to the layers of workarounds for this, I had to create a next-env-custom.d.ts where it removes that added declaration file

[petejodo]

The issue I think has to do with the loadWebpackConfig function and findPagesDir function. findPagesDir should return undefined if there is no pages directory and there should be an equivalent findAppDir that sets appDir field in loadWebpackConfig. I would try to test this locally but I'm not quite sure where this code actually lives once installed

[petejodo]

Does the suggested solution I described fix the issue?

[d-baranowski]

I can confirm that this issue is still happening and seems to be related to barrel exports with import * from ... syntax. Adding an empty /pages folder was a temporary work around for us. We're using next 13.5.6 and cypress 13.4.0

+1 This also solved the issue form me in

  "dependencies": {
    "@connectrpc/connect": "1.4.0",
    "@connectrpc/connect-next": "^1.4.0",
    "@connectrpc/connect-node": "1.4.0",
    "@connectrpc/connect-query": "1.3.1",
    "@connectrpc/connect-web": "1.4.0",
    "@emotion/cache": "11.13.1",
    "@emotion/react": "11.13.3",
    "@emotion/styled": "11.13.0",
    "@mui/icons-material": "6.0.2",
    "@mui/material": "6.0.2",
    "@mui/material-nextjs": "6.0.2",
    "@tanstack/react-query": "5.25.0",
    "@types/react-no-ssr": "^1.1.7",
    "next": "14.2.7",
    "react": "18.3.1",
    "react-dom": "18.3.1",
    "react-hook-form": "7.46.2",
    "react-hook-form-mui": "6.6.1",
    "react-hot-toast": "2.4.1",
    "react-no-ssr": "^1.1.0",
    "zod": "3.23.8"
  },
  "devDependencies": {
    "@bufbuild/buf": "1.34.0",
    "@bufbuild/protobuf": "1.7.2",
    "@bufbuild/protoc-gen-es": "1.7.2",
    "@bufbuild/protoplugin": "1.6.0",
    "@connectrpc/protoc-gen-connect-es": "1.3.0",
    "@connectrpc/protoc-gen-connect-query": "1.3.1",
    "@types/node": "latest",
    "@types/react": "latest",
    "@types/react-dom": "latest",
    "cypress": "^13.14.1",
    "eslint": "latest",
    "eslint-config-next": "latest",
    "typescript": "latest"
  }