Component testing + Next JS using @cypress/react/plugins/next configures the 'pages' directory wrongly

Current behavior

I believe that the internal configuration from the @cypress/react/plugins/next configures ‘nextjs’ to think that the pages directory is the ‘root folder of the project’ rather than ${rootFolder}/pages.

If you look at this line: https://github.com/cypress-io/cypress/blob/develop/npm/react/plugins/next/findNextWebpackConfig.js#L29

The findNextWebpackConfig util is setting the pagesDir to the root of the project.

Consequences

Because of that I’m seeing that next js webpack config is treating every folder in my root as a ‘pages’ folder, trying to bundle them as if they were pages. I bumped into this because I started seeing the following error while running component tests:

Syntax error: Using `export * from '...'` in a page is disallowed. Please use `export { default } from '...'` instead.
Read more: https://nextjs.org/docs/messages/export-all-in-page

At first I thought I had some ‘export * from …’ inside a ‘page’ but that was not the case. I found that a file inside ${root}/src/UILibrary/icons was doing export * from .... And because of how the cypress next plugin is configuring webpack my /src/UILibrary/icons is being treated as a page by next+webpack.

Desired behavior

Not fully certain of the solution. Probably allow to pass that configuration instead of assuming that pagesDir is config.projectRoot. So we can do the following inside our plugins config file:

const injectDevServer = require("@cypress/react/plugins/next");

module.exports = (on, config) => {
  if (config.testingType === "component") {
    injectDevServer(on, {...config, pagesDir: 'path to my pages dir' });
  }

  return config;
};

Optionally we could have a better default pointing to ${root}/pages (if it exists) or to ${root}/src/pages (which is the second option that nextjs recognizes as convention.

Test code to reproduce

I forked the webpack example from cypress docs and added a export * from ... to trigger the error. (this happens in webpack 4 or webpack 5 config the same. I used the webpack 4 because I wanted to use the official example published by cypress with the minimum amount of changes).

Here the fork and branch where to try it: https://github.com/rafaelchiti/cypress-component-examples/tree/bug_repro

To see the error make sure you are on that branch bug_repo and run: cd nextjs-webpack-4 to focus on the next example yarn install --pure-lockfile DEBUG=* yarn run cypress run-ct If you don’t set a wide debug filter option then the error gets swollen (probably there is a more limited debug config that still prints the error). Then after running that you should find in the terminal an error like:

Syntax error: Using `export * from '...'` in a page is disallowed. Please use `export { default } from '...'` instead.
Read more: https://nextjs.org/docs/messages/export-all-in-page

But if you look in the code there is no export * from ... inside the pages directory. But there is though an export * from ... inside the src/icons directory (which I added to test the problem).

Cypress Version

7.2.0 also tried on 8.3.0

Other

No response

[ZachJW34]

@rafaelchiti Thanks for all the detail, it’s was super helpful. I tested out your repo and confirmed the issue (and the fix by changing pagesDir). I think the best solution is to do what Next does and look for a ${root}/pages or a ${root}/src/pages directory and use that value rather than adding a configuration option (which they seem to be against). I can get a PR for this early next week.

[ZachJW34]

@AndreSilva1993 @rafaelchiti this change has been released in v5.10.1