Cypress show runtime error when use next.js with @cypress/react/plugins/next plugin

[jyunhanlin]

Current behavior

Use cypress with the @cypress/react/plugins/next plugin.
When run cypress, it shows the errors

TypeError: Cannot read property 'length' of undefined
    at getBaseWebpackConfig (/Users/Hank.Lin/playground/nextjs-starter-app/node_modules/next/dist/build/webpack-config.js:8:575)
    at getNextWebpackConfig (/Users/Hank.Lin/playground/nextjs-starter-app/node_modules/@cypress/react/plugins/next/file-preprocessor.js:16:35)
    at async getCachedWebpackPreprocessor (/Users/Hank.Lin/playground/nextjs-starter-app/node_modules/@cypress/react/plugins/next/file-preprocessor.js:59:26)
    at async Object.handler (/Users/Hank.Lin/playground/nextjs-starter-app/node_modules/@cypress/react/plugins/next/file-preprocessor.js:70:26)

Desired behavior

It should run the tests correctly.

Test code to reproduce

install steps

npx create-next-app nextjs-starter-app
npm install --save-dev cypress @cypress/react

in cypress/plugins/index.js

module.exports = (on, config) => {
  require('@cypress/react/plugins/next')(on, config);
}

Versions

cypress: 6.8.0
@cypress/react: 4.6.4
next: 10.1.2

[jyunhanlin]

I found a tricky method to make cypress run correctly.

steps:

1. install webpack version 4

npm install -D webpack@4

2. go to /node_modules/@cypress/react/plugins/next/file-preprocessor.js, and change the rewrites manually as below

  const nextWebpackConfig = await getNextJsBaseWebpackConfig(
    config.projectRoot,
    {
      buildId: `@cypress/react-${Math.random().toString()}`,
      config: nextConfig,
      dev: false,
      isServer: false,
      pagesDir: config.projectRoot,
      entrypoints: {},
      rewrites: {
        fallback:[],
        afterFiles: [],
        beforeFiles: [],
      },
    },
  )

[dmtrKovalenko]

This already has a fix here #15708 and should be released as a part of 7.0 today

[JessicaSachs]

Closing this issue now. Please reopen with any failures.