fix(webpack-dev-server): Pass in jsconfig to get webpack config for Next.js >= 13.2.1

[astone123]

• Closes Component testing broken with NextJS 13.2.1 #25951

Additional details

With the release of Next.js 13.2.1, we need to pass the JS/TS config into getBaseWebpackConfig, otherwise the config won't be respected when running the dev server. This PR adds some logic to get the user's JS/TS configuration and pass it to getBaseWebpackConfig.

Steps to test

1. Create a Next.js project (v13.2.1) that uses the src/ dir (it's in the generator options)
2. Configure Cypress for CT
3. Have a tsconfig.json file in the project root with these options

{
  "compilerOptions": {
    // ...
    "paths": {
      "*": ["src/*"]
    },
  }
  "baseUrl": '.'
}

4. In cypress/support/component.ts, import a stylesheet like this

import 'styles/globals.css'

5. Run a component test and verify that Webpack is able to resolve this import

Also test on < v13.2.1 and make sure that everything still works.

How has the user experience changed?

PR Tasks

• Have tests been added/updated?
• [na] Has a PR for user-facing changes been opened in cypress-documentation?
• [na] Have API changes been updated in the type definitions?

[astone123]

Thoughts about testing this with a system test? I looked into it for a while but was having some problems and started questioning whether or not it would be worth the effort. I was able to test it pretty well manually using some example projects.

[ZachJW34]

I think a system-test covering this would be beneficial

[cypress]

5 flaky tests on run #44547 ↗︎

0

5113

78

0

5

Details:

add system test project
Project: cypress	Commit: 909924132f
Status: Passed	Duration: 13:50 💡
Started: Mar 6, 2023 3:12 PM	Ended: Mar 6, 2023 3:26 PM

  commands/net_stubbing.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output Video

Test		Artifacts
network stubbing > intercepting request > can delay and throttle a StaticResponse		Output Video

  e2e/origin/commands/navigation.cy.ts • 1 flaky test • 5x-driver-chrome:beta

View Output Video

Test		Artifacts
cy.origin navigation > #consoleProps > .go()		Output Video

  cypress/cypress.cy.js • 3 flaky tests • 5x-driver-chrome:beta

View Output Video

Test		Artifacts
... > correctly returns currentRetry		Output Video
... > correctly returns currentRetry		Output Video
... > correctly returns currentRetry		Output Video

_{This comment has been generated by cypress-bot as a result of this project's GitHub integration settings.}

[marktnoonan]

I'm following the directions to test and trying a couple of things, but I consistently get

 Cannot find module '@/styles/globals.css'

I wonder if I am missing some little detail.

[marktnoonan]

Confirmed this works as expected for me. +1 to a system test