feat: add support for next 13 (#24396)

Author: ZachJW34

npm/webpack-dev-server/cypress/e2e/next.cy.ts

@@ -1,7 +1,7 @@
 /// <reference path="../support/e2e.ts" />
 import type { ProjectFixtureDir } from '@tooling/system-tests/lib/fixtureDirs'
 
-const WEBPACK_REACT: ProjectFixtureDir[] = ['next-11', 'next-12', 'next-11-webpack-4', 'next-12.1.6']
+const WEBPACK_REACT: ProjectFixtureDir[] = ['next-12', 'next-12.1.6', 'next-13']
 
 // Add to this list to focus on a particular permutation
 const ONLY_PROJECTS: ProjectFixtureDir[] = []

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

@@ -50,11 +50,95 @@ function getNextJsPackages (devServerConfig: WebpackDevServerConfig) {
   return packages
 }
 
+/**
+ * Types for `getNextJsBaseWebpackConfig` based on version:
+ * - v11.1.4
+  [
+    dir: string,
+    options: {
+      buildId: string
+      config: NextConfigComplete
+      dev?: boolean
+      isServer?: boolean
+      pagesDir: string
+      target?: string
+      reactProductionProfiling?: boolean
+      entrypoints: WebpackEntrypoints
+      rewrites: CustomRoutes['rewrites']
+      isDevFallback?: boolean
+      runWebpackSpan: Span
+    }
+  ]
+
+ * - v12.0.0 = Same as v11.1.4
+
+ * - v12.1.6
+  [
+    dir: string,
+    options: {
+      buildId: string
+      config: NextConfigComplete
+      compilerType: 'client' | 'server' | 'edge-server'
+      dev?: boolean
+      entrypoints: webpack5.EntryObject
+      hasReactRoot: boolean
+      isDevFallback?: boolean
+      pagesDir: string
+      reactProductionProfiling?: boolean
+      rewrites: CustomRoutes['rewrites']
+      runWebpackSpan: Span
+      target?: string
+    }
+  ]
+
+ * - v13.0.0
+  [
+    dir: string,
+    options: {
+      buildId: string
+      config: NextConfigComplete
+      compilerType: CompilerNameValues
+      dev?: boolean
+      entrypoints: webpack.EntryObject
+      hasReactRoot: boolean
+      isDevFallback?: boolean
+      pagesDir?: string
+      reactProductionProfiling?: boolean
+      rewrites: CustomRoutes['rewrites']
+      runWebpackSpan: Span
+      target?: string
+      appDir?: string
+      middlewareMatchers?: MiddlewareMatcher[]
+    }
+  ]
+
+ * - v13.0.1
+  [
+    dir: string,
+    options: {
+      buildId: string
+      config: NextConfigComplete
+      compilerType: CompilerNameValues
+      dev?: boolean
+      entrypoints: webpack.EntryObject
+      isDevFallback?: boolean
+      pagesDir?: string
+      reactProductionProfiling?: boolean
+      rewrites: CustomRoutes['rewrites']
+      runWebpackSpan: Span
+      target?: string
+      appDir?: string
+      middlewareMatchers?: MiddlewareMatcher[]
+    }
+  ]
+ */
 async function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Promise<Configuration> {
   const { loadConfig, getNextJsBaseWebpackConfig } = getNextJsPackages(devServerConfig)
 
   const nextConfig = await loadConfig('development', devServerConfig.cypressConfig.projectRoot)
   const runWebpackSpan = getRunWebpackSpan(devServerConfig)
+  const reactVersion = getReactVersion(devServerConfig.cypressConfig.projectRoot)
+
   const webpackConfig = await getNextJsBaseWebpackConfig(
     devServerConfig.cypressConfig.projectRoot,
     {
@@ -69,6 +153,8 @@ async function loadWebpackConfig (devServerConfig: WebpackDevServerConfig): Prom
       isServer: false,
       // Client webpack config for Next.js > 12.1.5
       compilerType: 'client',
+      // Required for Next.js > 13
+      hasReactRoot: reactVersion === 18,
     },
   )
 
@@ -300,3 +386,14 @@ function changeNextCachePath (webpackConfig: Configuration) {
     debug('Changing Next cache path from %s to %s', cacheDirectory, webpackConfig.cache.cacheDirectory)
   }
 }
+
+function getReactVersion (projectRoot: string): number | undefined {
+  try {
+    const reactPackageJsonPath = require.resolve('react/package.json', { paths: [projectRoot] })
+    const { version } = require(reactPackageJsonPath)
+
+    return Number(version.split('.')[0])
+  } catch (e) {
+    debug('Failed to source react with error: ', e)
+  }
+}

npm/webpack-dev-server/test/handlers/nextHandler.spec.ts

@@ -74,46 +74,6 @@ describe('nextHandler', function () {
     expect(sourceWebpackModulesResult.webpack.majorVersion).eq(5)
   })
 
-  it('sources from a next-11 project', async () => {
-    const projectRoot = await scaffoldMigrationProject('next-11')
-
-    process.chdir(projectRoot)
-
-    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await nextHandler({
-      framework: 'next',
-      cypressConfig: { projectRoot } as Cypress.PluginConfigOptions,
-    } as WebpackDevServerConfig)
-
-    expectWatchOverrides(webpackConfig)
-    expectPagesDir(webpackConfig, projectRoot)
-    expectWebpackSpan(webpackConfig)
-    expectGlobalStyleOverrides(webpackConfig)
-    expectCacheOverrides(webpackConfig, projectRoot)
-
-    expect(sourceWebpackModulesResult.webpack.importPath).to.include('next')
-    expect(sourceWebpackModulesResult.webpack.majorVersion).eq(5)
-  })
-
-  it('sources from a next-11-webpack-4 project', async () => {
-    const projectRoot = await scaffoldMigrationProject('next-11-webpack-4')
-
-    process.chdir(projectRoot)
-
-    const { frameworkConfig: webpackConfig, sourceWebpackModulesResult } = await nextHandler({
-      framework: 'next',
-      cypressConfig: { projectRoot, cypressBinaryRoot: __dirname } as Cypress.PluginConfigOptions,
-    } as WebpackDevServerConfig)
-
-    expectWatchOverrides(webpackConfig)
-    expectPagesDir(webpackConfig, projectRoot)
-    expectWebpackSpan(webpackConfig)
-    expectGlobalStyleOverrides(webpackConfig)
-    expectCacheOverrides(webpackConfig, projectRoot)
-
-    expect(sourceWebpackModulesResult.webpack.importPath).to.include('next')
-    expect(sourceWebpackModulesResult.webpack.majorVersion).eq(4)
-  })
-
   it('throws if nodeVersion is set to bundled', async () => {
     const projectRoot = await scaffoldMigrationProject('next-12')
 

packages/scaffold-config/src/dependencies.ts

@@ -94,7 +94,7 @@ export const WIZARD_DEPENDENCY_NEXT = {
   package: 'next',
   installer: 'next',
   description: 'The React Framework for Production',
-  minVersion: '^=10.0.0 || ^=11.0.0 || ^=12.0.0',
+  minVersion: '^=10.0.0 || ^=11.0.0 || ^=12.0.0 || ^=13.0.0',
 } as const
 
 export const WIZARD_DEPENDENCY_ANGULAR_CLI = {