Move transpilePackages out of experimental (#44194)

Should be good to land and it got tests covered. ## Bug - [ ] Related issues linked using `fixes #number` - [ ] Integration tests added - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Feature - [ ] Implements an existing feature request or RFC. Make sure the feature request has been accepted for implementation before opening a PR. - [ ] Related issues linked using `fixes #number` - [ ] [e2e](https://github.com/vercel/next.js/blob/canary/contributing/core/testing.md#writing-tests-for-nextjs) tests added - [ ] Documentation added - [ ] Telemetry added. In case of a feature if it's used or not. - [ ] Errors have a helpful link attached, see [`contributing.md`](https://github.com/vercel/next.js/blob/canary/contributing.md) ## Documentation / Examples - [ ] Make sure the linting passes by running `pnpm build && pnpm lint` - [ ] The "examples guidelines" are followed from [our contributing doc](https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md) Co-authored-by: JJ Kasper <22380829+ijjk@users.noreply.github.com>
vercel · Dec 20, 2022 · 04daf7e · 04daf7e
1 parent cafb886
commit 04daf7e
Show file tree

Hide file tree

Showing 12 changed files with 36 additions and 24 deletions.
diff --git a/packages/next/build/jest/jest.ts b/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,
 

diff --git a/packages/next/build/webpack-config.ts b/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

diff --git a/packages/next/build/webpack/config/blocks/css/index.ts b/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(

diff --git a/packages/next/build/webpack/config/index.ts b/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,
   }

diff --git a/packages/next/build/webpack/config/utils.ts b/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']
 }

diff --git a/packages/next/cli/next-dev.ts b/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.`
       )}   `
     }

diff --git a/packages/next/server/config-schema.ts b/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: {

diff --git a/packages/next/server/config-shared.ts b/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

diff --git a/packages/next/server/config.ts b/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)

diff --git a/test/e2e/app-dir/app-external/next.config.js b/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'],
   },
 }
diff --git a/test/e2e/transpile-packages/npm/next.config.js b/test/e2e/transpile-packages/npm/next.config.js
@@ -1,5 +1,3 @@
 module.exports = {
-  experimental: {
-    transpilePackages: ['css'],
-  },
+  transpilePackages: ['css'],
 }
diff --git a/test/production/jest/transpile-packages.test.ts b/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: {