Component Testing in Monorepo. DevServer can't find webpack config

[bryanjos]

Hi 👋🏿

Cypress: 10.4.0
@cypress/webpack-dev-server: 2.0.0
Next: 12.1.2

I'm migrating from Cypress 8.3.1 to 10.4.0. I've gotten most things working except for updates for component testing. I have a monorepo that's set up like so:

/packages
  /next
  /e2e <- where cypress and tests live

I'm updating the config from json to typescript and having trouble configuring the new devServer configuration to work.

Using the following, doesn't seem to work. I get a bunch of compilation errors from webpack because it can't find my configuration

  component: {
    devServer: {
      framework: 'next',
      bundler: 'webpack',
    }
  }

Same with with using some code I had for 8.3.1 to get the webpack config and pass to the devServer

    devServer(devServerConfig) {
     const webPackConfig = getWebpackConfig(devServerConfig.cypressConfig)

      return devServer({
        ...devServerConfig,
        framework: 'next',
        webPackConfig
      });

It feels like the webpackConfig is getting ignored.

I went digging into the @cypress/webpack-dev-server and looked at the loadWebpackConfig function in the nextHandler module. I see that it tries to use the projectRoot to try to get the next config in the call to loadConfig. If I manually change the second argument from devServerConfig.cypressConfig.projectRoot to the path to my next project, everything works. But of course that's not a viable solution to change the package like so.

So I was wondering if there is a better way to tell the devServer where my next config lives?