feat(nextjs): Prepare for next 16 bundler default (#17868)

chargome · web-flow · commit 7fc285870796 · 2025-10-13T11:17:30.000+02:00
Next.js will switch the default bundler starting with Next.js v16 - Updated detection logic for turbopack vs webpack - Updated generic tests (app dir + pages dir) to only run on webpack (we'll need to update these as soon as next16 is released) (there are tests that won't pass on turbopack and keeping this in sync for both bundlers will become unmaintainable) - Add a bunch of unit tests - Disabled `next dev --webpack` tests for now as instrumentation breaks – tracked in [linear](https://linear.app/getsentry/issue/FE-618/webpack-breaks-instrumentation-for-dev-mode-in-next-16) - Middleware tests failing likely due to missing [Proxy support ](#17894), will split this up in a follow up pr
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/package.json b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/package.json
@@ -4,12 +4,14 @@
   "private": true,
   "scripts": {
     "build": "next build > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
+    "build:webpack": "next build --webpack > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:prod": "TEST_ENV=production playwright test",
     "test:dev": "TEST_ENV=development playwright test",
+    "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
     "test:build": "pnpm install && pnpm build",
     "test:test-build": "pnpm ts-node --script-mode assert-build.ts",
-    "test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@beta && pnpm add react-dom@beta && pnpm build",
+    "test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@latest && pnpm add react-dom@latest && pnpm build:webpack",
     "test:build-latest": "pnpm install && pnpm add next@latest && pnpm build",
     "test:build-13": "pnpm install && pnpm add next@13.5.11 && pnpm build",
     "test:assert": "pnpm test:test-build && pnpm test:prod && pnpm test:dev"
@@ -43,7 +45,8 @@
     "optionalVariants": [
       {
         "build-command": "pnpm test:build-canary",
-        "label": "nextjs-app-dir (canary)"
+        "label": "nextjs-app-dir (canary, webpack opt-in)",
+        "assert-command": "pnpm test:prod"
       },
       {
         "build-command": "pnpm test:build-latest",
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/playwright.config.mjs
@@ -5,8 +5,16 @@ if (!testEnv) {
   throw new Error('No test env defined');
 }
 
+const getStartCommand = () => {
+  if (testEnv === 'development-webpack') {
+    return 'pnpm next dev -p 3030 --webpack';
+  }
+
+  return testEnv === 'development' ? 'pnpm next dev -p 3030' : 'pnpm next start -p 3030';
+};
+
 const config = getPlaywrightConfig({
-  startCommand: testEnv === 'development' ? 'pnpm next dev -p 3030' : 'pnpm next start -p 3030',
+  startCommand: getStartCommand(),
   port: 3030,
 });
 
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/client-errors.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/client-errors.test.ts
@@ -1,12 +1,12 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { isDevMode } from './isDevMode';
 
 const packageJson = require('../package.json');
 
 test('Sends a client-side exception to Sentry', async ({ page }) => {
   const nextjsVersion = packageJson.dependencies.next;
   const nextjsMajor = Number(nextjsVersion.split('.')[0]);
-  const isDevMode = process.env.TEST_ENV === 'development';
 
   await page.goto('/');
 
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/devErrorSymbolification.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/devErrorSymbolification.test.ts
@@ -1,8 +1,9 @@
 import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
+import { isDevMode } from './isDevMode';
 
 test('should have symbolicated dev errors', async ({ page }) => {
-  test.skip(process.env.TEST_ENV !== 'development', 'should be skipped for non-dev mode');
+  test.skip(!isDevMode, 'should be skipped for non-dev mode');
 
   await page.goto('/');
 
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/isDevMode.ts b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/isDevMode.ts
@@ -0,0 +1 @@
+export const isDevMode = !!process.env.TEST_ENV && process.env.TEST_ENV.includes('development');
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-app-dir/tests/transactions.test.ts
@@ -1,12 +1,12 @@
 import { expect, test } from '@playwright/test';
 import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { isDevMode } from './isDevMode';
 
 const packageJson = require('../package.json');
 
 test('Sends a pageload transaction', async ({ page }) => {
   const nextjsVersion = packageJson.dependencies.next;
   const nextjsMajor = Number(nextjsVersion.split('.')[0]);
-  const isDevMode = process.env.TEST_ENV === 'development';
 
   const pageloadTransactionEventPromise = waitForTransaction('nextjs-app-dir', transactionEvent => {
     return transactionEvent?.contexts?.trace?.op === 'pageload' && transactionEvent?.transaction === '/';
@@ -78,8 +78,9 @@ test('Should send a transaction for instrumented server actions', async ({ page
 test('Should send a wrapped server action as a child of a nextjs transaction', async ({ page }) => {
   const nextjsVersion = packageJson.dependencies.next;
   const nextjsMajor = Number(nextjsVersion.split('.')[0]);
+
   test.skip(!isNaN(nextjsMajor) && nextjsMajor < 14, 'only applies to nextjs apps >= version 14');
-  test.skip(process.env.TEST_ENV === 'development', 'this magically only works in production');
+  test.skip(isDevMode, 'this magically only works in production');
 
   const nextjsPostTransactionPromise = waitForTransaction('nextjs-app-dir', async transactionEvent => {
     return (
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/package.json b/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/package.json
@@ -4,12 +4,14 @@
   "private": true,
   "scripts": {
     "build": "next build > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
+    "build:webpack": "next build --webpack > .tmp_build_stdout 2> .tmp_build_stderr || (cat .tmp_build_stdout && cat .tmp_build_stderr && exit 1)",
     "clean": "npx rimraf node_modules pnpm-lock.yaml",
     "test:prod": "TEST_ENV=production playwright test",
     "test:dev": "TEST_ENV=development playwright test",
+    "test:dev-webpack": "TEST_ENV=development-webpack playwright test",
     "test:build": "pnpm install && pnpm build",
     "test:test-build": "pnpm ts-node --script-mode assert-build.ts",
-    "test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@beta && pnpm add react-dom@beta && pnpm build",
+    "test:build-canary": "pnpm install && pnpm add next@canary && pnpm add react@latest && pnpm add react-dom@latest && pnpm build:webpack",
     "test:build-latest": "pnpm install && pnpm add next@latest && pnpm add react@latest && pnpm add react-dom@latest && pnpm build",
     "test:build-13": "pnpm install && pnpm add next@13.5.11 && pnpm build",
     "test:assert": "pnpm test:test-build && pnpm test:prod && pnpm test:dev"
@@ -43,7 +45,8 @@
     "optionalVariants": [
       {
         "build-command": "pnpm test:build-canary",
-        "label": "nextjs-pages-dir (canary)"
+        "label": "nextjs-pages-dir (canary, webpack opt-in)",
+        "assert-command": "pnpm test:prod"
       },
       {
         "build-command": "pnpm test:build-latest",
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/playwright.config.mjs b/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/playwright.config.mjs
@@ -5,8 +5,16 @@ if (!testEnv) {
   throw new Error('No test env defined');
 }
 
+const getStartCommand = () => {
+  if (testEnv === 'development-webpack') {
+    return 'pnpm next dev -p 3030 --webpack';
+  }
+
+  return testEnv === 'development' ? 'pnpm next dev -p 3030' : 'pnpm next start -p 3030';
+};
+
 const config = getPlaywrightConfig({
-  startCommand: testEnv === 'development' ? 'pnpm next dev -p 3030' : 'pnpm next start -p 3030',
+  startCommand: getStartCommand(),
   port: 3030,
 });
 
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/devErrorSymbolification.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/devErrorSymbolification.test.ts
@@ -2,7 +2,7 @@ import { expect, test } from '@playwright/test';
 import { waitForError } from '@sentry-internal/test-utils';
 
 test('should have symbolicated dev errors', async ({ page }) => {
-  test.skip(process.env.TEST_ENV !== 'development', 'should be skipped for non-dev mode');
+  test.skip(!process.env.TEST_ENV?.includes('development'), 'should be skipped for non-dev mode');
 
   await page.goto('/');
 
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/isDevMode.ts b/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/isDevMode.ts
@@ -0,0 +1 @@
+export const isDevMode = !!process.env.TEST_ENV && process.env.TEST_ENV.includes('development');
diff --git a/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts b/dev-packages/e2e-tests/test-applications/nextjs-pages-dir/tests/transactions.test.ts
@@ -1,12 +1,12 @@
 import { expect, test } from '@playwright/test';
-import { waitForError, waitForTransaction } from '@sentry-internal/test-utils';
+import { waitForTransaction } from '@sentry-internal/test-utils';
+import { isDevMode } from './isDevMode';
 
 const packageJson = require('../package.json');
 
 test('Sends a pageload transaction', async ({ page }) => {
   const nextjsVersion = packageJson.dependencies.next;
   const nextjsMajor = Number(nextjsVersion.split('.')[0]);
-  const isDevMode = process.env.TEST_ENV === 'development';
 
   const pageloadTransactionEventPromise = waitForTransaction('nextjs-pages-dir', transactionEvent => {
     return transactionEvent?.contexts?.trace?.op === 'pageload' && transactionEvent?.transaction === '/';
diff --git a/packages/nextjs/src/config/util.ts b/packages/nextjs/src/config/util.ts
@@ -65,3 +65,68 @@ export function supportsProductionCompileHook(version: string): boolean {
 
   return false;
 }
+
+/**
+ * Checks if the current Next.js version uses Turbopack as the default bundler.
+ * Starting from Next.js 15.6.0-canary.38, turbopack became the default for `next build`.
+ *
+ * @param version - Next.js version string to check.
+ * @returns true if the version uses Turbopack by default
+ */
+export function isTurbopackDefaultForVersion(version: string): boolean {
+  if (!version) {
+    return false;
+  }
+
+  const { major, minor, prerelease } = parseSemver(version);
+
+  if (major === undefined || minor === undefined) {
+    return false;
+  }
+
+  // Next.js 16+ uses turbopack by default
+  if (major >= 16) {
+    return true;
+  }
+
+  // For Next.js 15, only canary versions 15.6.0-canary.40+ use turbopack by default
+  // Stable 15.x releases still use webpack by default
+  if (major === 15 && minor >= 6 && prerelease && prerelease.startsWith('canary.')) {
+    if (minor >= 7) {
+      return true;
+    }
+    const canaryNumber = parseInt(prerelease.split('.')[1] || '0', 10);
+    if (canaryNumber >= 40) {
+      return true;
+    }
+  }
+
+  return false;
+}
+
+/**
+ * Determines which bundler is actually being used based on environment variables,
+ * CLI flags, and Next.js version.
+ *
+ * @param nextJsVersion - The Next.js version string
+ * @returns 'turbopack', 'webpack', or undefined if it cannot be determined
+ */
+export function detectActiveBundler(nextJsVersion: string | undefined): 'turbopack' | 'webpack' | undefined {
+  if (process.env.TURBOPACK || process.argv.includes('--turbo')) {
+    return 'turbopack';
+  }
+
+  // Explicit opt-in to webpack via --webpack flag
+  if (process.argv.includes('--webpack')) {
+    return 'webpack';
+  }
+
+  // Fallback to version-based default behavior
+  if (nextJsVersion) {
+    const turbopackIsDefault = isTurbopackDefaultForVersion(nextJsVersion);
+    return turbopackIsDefault ? 'turbopack' : 'webpack';
+  }
+
+  // Unlikely but at this point, we just assume webpack for older behavior
+  return 'webpack';
+}
diff --git a/packages/nextjs/src/config/withSentryConfig.ts b/packages/nextjs/src/config/withSentryConfig.ts
@@ -15,7 +15,7 @@ import type {
   NextConfigObject,
   SentryBuildOptions,
 } from './types';
-import { getNextjsVersion, supportsProductionCompileHook } from './util';
+import { detectActiveBundler, getNextjsVersion, supportsProductionCompileHook } from './util';
 import { constructWebpackConfigFunction } from './webpack';
 
 let showedExportModeTunnelWarning = false;
@@ -260,28 +260,24 @@ function getFinalConfigObject(
     nextMajor = major;
   }
 
-  const isTurbopack = process.env.TURBOPACK;
+  const activeBundler = detectActiveBundler(nextJsVersion);
+  const isTurbopack = activeBundler === 'turbopack';
+  const isWebpack = activeBundler === 'webpack';
   const isTurbopackSupported = supportsProductionCompileHook(nextJsVersion ?? '');
 
+  // Warn if using turbopack with an unsupported Next.js version
   if (!isTurbopackSupported && isTurbopack) {
-    if (process.env.NODE_ENV === 'development') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[@sentry/nextjs] WARNING: You are using the Sentry SDK with Turbopack (\`next dev --turbopack\`). The Sentry SDK is compatible with Turbopack on Next.js version 15.4.1 or later. You are currently on ${nextJsVersion}. Please upgrade to a newer Next.js version to use the Sentry SDK with Turbopack.`,
-      );
-    } else if (process.env.NODE_ENV === 'production') {
-      // eslint-disable-next-line no-console
-      console.warn(
-        `[@sentry/nextjs] WARNING: You are using the Sentry SDK with Turbopack (\`next build --turbopack\`). The Sentry SDK is compatible with Turbopack on Next.js version 15.4.1 or later. You are currently on ${nextJsVersion}. Please upgrade to a newer Next.js version to use the Sentry SDK with Turbopack.`,
-      );
-    }
+    // eslint-disable-next-line no-console
+    console.warn(
+      `[@sentry/nextjs] WARNING: You are using the Sentry SDK with Turbopack. The Sentry SDK is compatible with Turbopack on Next.js version 15.4.1 or later. You are currently on ${nextJsVersion}. Please upgrade to a newer Next.js version to use the Sentry SDK with Turbopack.`,
+    );
   }
 
-  // webpack case
+  // Webpack case - warn if trying to use runAfterProductionCompile hook with unsupported Next.js version
   if (
     userSentryOptions.useRunAfterProductionCompileHook &&
     !supportsProductionCompileHook(nextJsVersion ?? '') &&
-    !isTurbopack
+    isWebpack
   ) {
     // eslint-disable-next-line no-console
     console.warn(
@@ -369,17 +365,18 @@ function getFinalConfigObject(
             ],
           },
         }),
-    webpack:
-      isTurbopack || userSentryOptions.disableSentryWebpackConfig
-        ? incomingUserNextConfigObject.webpack // just return the original webpack config
-        : constructWebpackConfigFunction({
+    ...(isWebpack && !userSentryOptions.disableSentryWebpackConfig
+      ? {
+          webpack: constructWebpackConfigFunction({
             userNextConfig: incomingUserNextConfigObject,
             userSentryOptions,
             releaseName,
             routeManifest,
             nextJsVersion,
             useRunAfterProductionCompileHook: shouldUseRunAfterProductionCompileHook,
           }),
+        }
+      : {}),
     ...(isTurbopackSupported && isTurbopack
       ? {
           turbopack: constructTurbopackConfig({
diff --git a/packages/nextjs/test/config/util.test.ts b/packages/nextjs/test/config/util.test.ts
diff --git a/packages/nextjs/test/config/withSentryConfig.test.ts b/packages/nextjs/test/config/withSentryConfig.test.ts

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1 @@`
	`1`	`+export const isDevMode = !!process.env.TEST_ENV && process.env.TEST_ENV.includes('development');`