The 'compilation' argument must be an instance of Compilation

[William-Owen]

Not sure if this is a bug or I am I doing something wrong.

I have Cypress 10.3.0 running with the e2e tests but then after initialising the components testing it fails after choosing the components testing option. I am using Typescript, and the platform is Next.js and I have Storybook in the project also.

Your configFile threw an error from: cypress.config.js

We stopped running your tests because your config file crashed.

Later it indicates that there error was: -

TypeError: The 'compilation' argument must be an instance of Compilation

My cypress.config.ts

import { defineConfig } from "cypress"

export default defineConfig({
	e2e: {
		setupNodeEvents(on, config) {
			// implement node event listeners here
		},
	},

	component: {
		devServer: {
			framework: "next",
			bundler: "webpack",
		},
	},
})

My package versions

"cypress": "^10.3.0",
"next": "12.2.0",
"react": "18.2.0",
"react-dom": "18.2.0",

I have read in some other projects something about this being a webpack clash; so I added the following to package.json but it didn't help: -

"resolutions": {
  "webpack": "5.73.0"
},

Any and all help appreciated.

[ForeshadowRU]

It's probably because of two versions of webpack (bundled in next.js and installed as dev-dependency) are conflicting

You can try:
yarn add cypress @cypress/webpack-dev-server html-webpack-plugin@5 webpack@5
and specify webpack5:true in your next.config.js
Source: #15864 (comment)