fix: correctly pass resolvedBaseUrl for Next.js 13.2.0+ (#26399)

* add test project

* styles

* pass resolvedBaseUrl

* make project more minimal

* build binaries

* changelog

* remove css

* pass supportedBrowsers to next webpack config

* handle case of missing getSupportedBrowsers function

* add default function

.circleci/workflows.yml

@@ -30,7 +30,7 @@ mainBuildFilters: &mainBuildFilters
         - /^release\/\d+\.\d+\.\d+$/
         # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
         - 'update-v8-snapshot-cache-on-develop'
-        - 'emily/before-spec-promise'
+        - 'issue-25951-next-app'
 
 # usually we don't build Mac app - it takes a long time
 # but sometimes we want to really confirm we are doing the right thing
@@ -41,7 +41,7 @@ macWorkflowFilters: &darwin-workflow-filters
     - equal: [ develop, << pipeline.git.branch >> ]
     # use the following branch as well to ensure that v8 snapshot cache updates are fully tested
     - equal: [ 'update-v8-snapshot-cache-on-develop', << pipeline.git.branch >> ]
-    - equal: [ 'emily/before-spec-promise', << pipeline.git.branch >> ]
+    - equal: [ 'issue-25951-next-app', << pipeline.git.branch >> ]
     - matches:
         pattern: /^release\/\d+\.\d+\.\d+$/
         value: << pipeline.git.branch >>
@@ -139,7 +139,7 @@ commands:
       - run:
           name: Check current branch to persist artifacts
           command: |
-            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "emily/before-spec-promise" && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" ]]; then
+            if [[ "$CIRCLE_BRANCH" != "develop" && "$CIRCLE_BRANCH" != "release/"* && "$CIRCLE_BRANCH" != "issue-25951-next-app" && "$CIRCLE_BRANCH" != "update-v8-snapshot-cache-on-develop" ]]; then
               echo "Not uploading artifacts or posting install comment for this branch."
               circleci-agent step halt
             fi

cli/CHANGELOG.md

@@ -7,6 +7,7 @@ _Released 04/11/2023 (PENDING)_
 
  - Capture the [Azure](https://azure.microsoft.com/) CI provider's environment variable [`SYSTEM_PULLREQUEST_PULLREQUESTNUMBER`](https://learn.microsoft.com/en-us/azure/devops/pipelines/build/variables?view=azure-devops&tabs=yaml#system-variables-devops-services) to display the linked PR number in the Cloud. Addressed in [#26215](https://github.com/cypress-io/cypress/pull/26215).
  - Fixed an issue in the onboarding wizard where project framework & bundler would not be auto-detected when opening directly into component testing mode using the `--component` CLI flag. Fixes [#22777](https://github.com/cypress-io/cypress/issues/22777).
+ - Fix an edge case in Component Testing where a custom `baseUrl` in `tsconfig.json` for Next.js 13.2.0+ is not respected. This was partially fixed in [#26005](https://github.com/cypress-io/cypress/pull/26005), but an edge case was missed. Fixes [#25951](https://github.com/cypress-io/cypress/issues/25951).
 
 **Misc:**
 

npm/webpack-dev-server/src/helpers/nextHandler.ts

@@ -29,7 +29,12 @@ export async function nextHandler (devServerConfig: WebpackDevServerConfig): Pro
  */
 function getNextJsPackages (devServerConfig: WebpackDevServerConfig) {
   const resolvePaths = { paths: [devServerConfig.cypressConfig.projectRoot] }
-  const packages = {} as { loadConfig: Function, getNextJsBaseWebpackConfig: Function, nextLoadJsConfig: Function }
+  const packages = {} as {
+    loadConfig: (phase: 'development', dir: string) => Promise<any>
+    getNextJsBaseWebpackConfig: Function
+    nextLoadJsConfig: Function
+    getSupportedBrowsers: (dir: string, isDevelopment: boolean, nextJsConfig: any) => Promise<string[] | undefined>
+  }
 
   try {
     const loadConfigPath = require.resolve('next/dist/server/config', resolvePaths)
@@ -55,6 +60,15 @@ function getNextJsPackages (devServerConfig: WebpackDevServerConfig) {
     throw new Error(`Failed to load "next/dist/build/load-jsconfig" with error: ${ e.message ?? e}`)
   }
 
+  // Does not exist prior to Next 13.
+  try {
+    const getUtilsPath = require.resolve('next/dist/build/utils', resolvePaths)
+
+    packages.getSupportedBrowsers = require(getUtilsPath).getSupportedBrowsers ?? (() => Promise.resolve([]))
+  } catch (e: any) {
+    throw new Error(`Failed to load "next/dist/build/utils" with error: ${ e.message ?? e}`)
+  }
+
   return packages
 }
 
@@ -173,12 +187,13 @@ function getNextJsPackages (devServerConfig: WebpackDevServerConfig) {
   ]
  */
 async function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Promise<Configuration> {
-  const { loadConfig, getNextJsBaseWebpackConfig, nextLoadJsConfig } = getNextJsPackages(devServerConfig)
+  const { loadConfig, getNextJsBaseWebpackConfig, nextLoadJsConfig, getSupportedBrowsers } = getNextJsPackages(devServerConfig)
 
   const nextConfig = await loadConfig('development', devServerConfig.cypressConfig.projectRoot)
   const runWebpackSpan = getRunWebpackSpan(devServerConfig)
   const reactVersion = getReactVersion(devServerConfig.cypressConfig.projectRoot)
   const jsConfigResult = await nextLoadJsConfig?.(devServerConfig.cypressConfig.projectRoot, nextConfig)
+  const supportedBrowsers = await getSupportedBrowsers(devServerConfig.cypressConfig.projectRoot, true, nextConfig)
 
   const webpackConfig = await getNextJsBaseWebpackConfig(
     devServerConfig.cypressConfig.projectRoot,
@@ -196,8 +211,12 @@ async function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Prom
       compilerType: 'client',
       // Required for Next.js > 13
       hasReactRoot: reactVersion === 18,
-      // Required for Next.js > 13.2.1 to respect TS/JS config
+      // Required for Next.js > 13.2.0 to respect TS/JS config
       jsConfig: jsConfigResult.jsConfig,
+      // Required for Next.js > 13.2.0 to respect tsconfig.compilerOptions.baseUrl
+      resolvedBaseUrl: jsConfigResult.resolvedBaseUrl,
+      // Added in Next.js 13, passed via `...info`: https://github.com/vercel/next.js/pull/45637/files
+      supportedBrowsers,
     },
   )
 

system-tests/projects/issue-25951-next-app/README.md

@@ -0,0 +1 @@
+Minimal reproduction for https://github.com/cypress-io/cypress/issues/25951.

system-tests/projects/issue-25951-next-app/cypress.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'cypress'
+
+export default defineConfig({
+  component: {
+    fixturesFolder: false,
+    supportFile: false,
+    devServer: {
+      framework: 'next',
+      bundler: 'webpack',
+    },
+  },
+})

system-tests/projects/issue-25951-next-app/cypress/support/component-index.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <title>Components App</title>
+    <!-- Used by Next.js to inject CSS. -->
+    <div id="__next_css__DO_NOT_USE__"></div>
+  </head>
+  <body>
+    <div data-cy-root></div>
+  </body>
+</html>

system-tests/projects/issue-25951-next-app/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

system-tests/projects/issue-25951-next-app/next.config.js

@@ -0,0 +1,6 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+}
+
+module.exports = nextConfig

system-tests/projects/issue-25951-next-app/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "issue-25951-next-app",
+  "version": "0.0.0",
+  "private": true,
+  "dependencies": {
+    "@types/node": "18.15.11",
+    "@types/react": "18.0.32",
+    "@types/react-dom": "18.0.11",
+    "next": "13.2.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "typescript": "5.0.3"
+  }
+}

system-tests/projects/issue-25951-next-app/src/pages/_app.cy.tsx

@@ -0,0 +1,11 @@
+import React from 'react'
+import { mount } from 'cypress/react18'
+import App from './_app'
+
+describe('<App />', () => {
+  it('renders', () => {
+    // see: https://on.cypress.io/mounting-react
+    mount(<App />)
+    cy.contains('Hello world')
+  })
+})

system-tests/projects/issue-25951-next-app/src/pages/_app.tsx

@@ -0,0 +1,5 @@
+import 'styles/globals.css'
+
+export default function App () {
+  return <div>Hello world</div>
+}

system-tests/projects/issue-25951-next-app/src/styles/globals.css

@@ -0,0 +1,3 @@
+body {
+  background: skyblue;
+}

system-tests/projects/issue-25951-next-app/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "baseUrl": "src",
+    "target": "es5",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}