Move transpilePackages out of experimental

packages/next/build/jest/jest.ts

@@ -95,9 +95,7 @@ export default function nextJest(options: { dir?: string } = {}) {
         await lockfilePatchPromise.cur
       }
 
-      const transpiled = (
-        nextConfig?.experimental?.transpilePackages ?? []
-      ).join('|')
+      const transpiled = (nextConfig?.transpilePackages ?? []).join('|')
       return {
         ...resolvedJestConfig,
 

packages/next/build/webpack-config.ts

@@ -1255,10 +1255,10 @@ export default async function getBaseWebpackConfig(
 
     // If a package should be transpiled by Next.js, we skip making it external.
     // It doesn't matter what the extension is, as we'll transpile it anyway.
-    if (config.experimental.transpilePackages && !resolvedExternalPackageDirs) {
+    if (config.transpilePackages && !resolvedExternalPackageDirs) {
       resolvedExternalPackageDirs = new Map()
       // We need to resolve all the external package dirs initially.
-      for (const pkg of config.experimental.transpilePackages) {
+      for (const pkg of config.transpilePackages) {
         const pkgRes = await resolveExternal(
           dir,
           config.experimental.esmExternals,
@@ -1281,7 +1281,7 @@ export default async function getBaseWebpackConfig(
     const shouldBeBundled =
       isResourceInPackages(
         res,
-        config.experimental.transpilePackages,
+        config.transpilePackages,
         resolvedExternalPackageDirs
       ) ||
       (isEsm && config.experimental.appDir)
@@ -1319,7 +1319,7 @@ export default async function getBaseWebpackConfig(
   }
 
   const shouldIncludeExternalDirs =
-    config.experimental.externalDir || !!config.experimental.transpilePackages
+    config.experimental.externalDir || !!config.transpilePackages
 
   const codeCondition = {
     test: /\.(tsx|ts|js|cjs|mjs|jsx)$/,
@@ -1334,7 +1334,7 @@ export default async function getBaseWebpackConfig(
 
       const shouldBeBundled = isResourceInPackages(
         excludePath,
-        config.experimental.transpilePackages
+        config.transpilePackages
       )
       if (shouldBeBundled) return false
 
@@ -2399,6 +2399,7 @@ export default async function getBaseWebpackConfig(
     future: config.future,
     experimental: config.experimental,
     disableStaticImages: config.images.disableStaticImages,
+    transpilePackages: config.transpilePackages,
   })
 
   // @ts-ignore Cache exists

packages/next/build/webpack/config/blocks/css/index.ts

@@ -222,7 +222,7 @@ export const css = curry(async function css(
   )
 
   const shouldIncludeExternalCSSImports =
-    !!ctx.experimental.craCompat || !!ctx.experimental.transpilePackages
+    !!ctx.experimental.craCompat || !!ctx.transpilePackages
 
   // CSS modules & SASS modules support. They are allowed to be imported in anywhere.
   fns.push(

packages/next/build/webpack/config/index.ts

@@ -22,6 +22,7 @@ export async function buildConfiguration(
     sassOptions,
     productionBrowserSourceMaps,
     future,
+    transpilePackages,
     experimental,
     disableStaticImages,
   }: {
@@ -36,6 +37,7 @@ export async function buildConfiguration(
     assetPrefix: string
     sassOptions: any
     productionBrowserSourceMaps: boolean
+    transpilePackages: NextConfigComplete['transpilePackages']
     future: NextConfigComplete['future']
     experimental: NextConfigComplete['experimental']
     disableStaticImages: NextConfigComplete['disableStaticImages']
@@ -59,6 +61,7 @@ export async function buildConfiguration(
       : '',
     sassOptions,
     productionBrowserSourceMaps,
+    transpilePackages,
     future,
     experimental,
   }

packages/next/build/webpack/config/utils.ts

@@ -20,6 +20,8 @@ export type ConfigurationContext = {
   sassOptions: any
   productionBrowserSourceMaps: boolean
 
+  transpilePackages: NextConfigComplete['transpilePackages']
+
   future: NextConfigComplete['future']
   experimental: NextConfigComplete['experimental']
 }

packages/next/cli/next-dev.ts

@@ -300,7 +300,7 @@ const nextDev: cliCommand = async (argv) => {
         `The only configurations options supported are:\n    - ${chalk.cyan(
           'experimental.serverComponentsExternalPackages'
         )}\n    - ${chalk.cyan(
-          'experimental.transpilePackages'
+          'transpilePackages'
         )}\n  To use Turbopack, remove other configuration options.`
       )}   `
     }

packages/next/server/config-schema.ts

@@ -363,12 +363,6 @@ const configSchema = {
           },
           type: 'array',
         },
-        transpilePackages: {
-          items: {
-            type: 'string',
-          },
-          type: 'array',
-        },
         scrollRestoration: {
           type: 'boolean',
         },
@@ -706,6 +700,12 @@ const configSchema = {
     trailingSlash: {
       type: 'boolean',
     },
+    transpilePackages: {
+      items: {
+        type: 'string',
+      },
+      type: 'array',
+    },
     typescript: {
       additionalProperties: false,
       properties: {

packages/next/server/config-shared.ts

@@ -159,9 +159,6 @@ export interface ExperimentalConfig {
   // A list of packages that should be treated as external in the RSC server build
   serverComponentsExternalPackages?: string[]
 
-  // A list of packages that should always be transpiled and bundled in the server
-  transpilePackages?: string[]
-
   fontLoaders?: Array<{ loader: string; options?: any }>
 
   webVitalsAttribution?: Array<typeof WEB_VITALS[number]>
@@ -504,6 +501,9 @@ export interface NextConfig extends Record<string, any> {
 
   output?: 'standalone'
 
+  // A list of packages that should always be transpiled and bundled in the server
+  transpilePackages?: string[]
+
   allowMiddlewareResponseBody?: boolean
 
   skipMiddlewareUrlNormalize?: boolean

packages/next/server/config.ts

@@ -605,6 +605,16 @@ function assignDefaults(dir: string, userConfig: { [key: string]: any }) {
     result.output = 'standalone'
   }
 
+  if (
+    result.experimental &&
+    'transpilePackages' in (result.experimental as any)
+  ) {
+    Log.warn(
+      `\`transpilePackages\` has been moved out of \`experimental\`. Please update your ${configFileName} file accordingly.`
+    )
+    result.transpilePackages = (result.experimental as any).transpilePackages
+  }
+
   if (
     result.experimental?.outputFileTracingRoot &&
     !isAbsolute(result.experimental.outputFileTracingRoot)

test/e2e/app-dir/app-external/next.config.js

@@ -1,8 +1,8 @@
 module.exports = {
   reactStrictMode: true,
+  transpilePackages: ['untranspiled-module', 'css', 'font'],
   experimental: {
     appDir: true,
     serverComponentsExternalPackages: ['conditional-exports-optout'],
-    transpilePackages: ['untranspiled-module', 'css', 'font'],
   },
 }

test/e2e/transpile-packages/npm/next.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  experimental: {
-    transpilePackages: ['css'],
-  },
+  transpilePackages: ['css'],
 }

test/production/jest/transpile-packages.test.ts

@@ -17,7 +17,7 @@ describe('next/jest', () => {
         })`,
         'jest.config.js': `module.exports = require('next/jest')({ dir: './' })()`,
         'next.config.js': `module.exports = {
-          experimental: { transpilePackages: ['@hashicorp/platform-util'] },
+          transpilePackages: ['@hashicorp/platform-util'],
         }`,
       },
       packageJson: {