fix: next trace error (#18189)

Author: ZachJW34

npm/react/plugins/next/findNextWebpackConfig.js

@@ -3,6 +3,7 @@
 const debug = require('debug')('@cypress/react')
 const getNextJsBaseWebpackConfig = require('next/dist/build/webpack-config').default
 const { findPagesDir } = require('../../dist/next/findPagesDir')
+const { getRunWebpackSpan } = require('../../dist/next/getRunWebpackSpan')
 
 async function getNextWebpackConfig (config) {
   let loadConfig
@@ -20,6 +21,7 @@ async function getNextWebpackConfig (config) {
     }
   }
   const nextConfig = await loadConfig('development', config.projectRoot)
+  const runWebpackSpan = await getRunWebpackSpan()
   const nextWebpackConfig = await getNextJsBaseWebpackConfig(
     config.projectRoot,
     {
@@ -30,6 +32,7 @@ async function getNextWebpackConfig (config) {
       pagesDir: findPagesDir(config.projectRoot),
       entrypoints: {},
       rewrites: { fallback: [], afterFiles: [], beforeFiles: [] },
+      ...runWebpackSpan,
     },
   )
 

npm/react/plugins/next/getRunWebpackSpan.ts

@@ -0,0 +1,16 @@
+import type { Span } from 'next/dist/telemetry/trace/trace'
+
+// Starting with v11.1.1, a trace is required.
+// 'next/dist/telemetry/trace/trace' only exists since v10.0.9
+// and our peerDeps support back to v8 so try-catch this import
+export async function getRunWebpackSpan (): Promise<{ runWebpackSpan?: Span }> {
+  let trace: (name: string) => Span
+
+  try {
+    trace = await import('next/dist/telemetry/trace/trace').then((m) => m.trace)
+
+    return { runWebpackSpan: trace('cypress') }
+  } catch (_) {
+    return {}
+  }
+}