From 04daf7eb0687c4cc891b5efb720280fbd7fb8f04 Mon Sep 17 00:00:00 2001 From: Shu Ding Date: Tue, 20 Dec 2022 18:27:30 +0100 Subject: [PATCH] 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> --- packages/next/build/jest/jest.ts | 4 +--- packages/next/build/webpack-config.ts | 11 ++++++----- .../next/build/webpack/config/blocks/css/index.ts | 2 +- packages/next/build/webpack/config/index.ts | 3 +++ packages/next/build/webpack/config/utils.ts | 2 ++ packages/next/cli/next-dev.ts | 2 +- packages/next/server/config-schema.ts | 12 ++++++------ packages/next/server/config-shared.ts | 6 +++--- packages/next/server/config.ts | 10 ++++++++++ test/e2e/app-dir/app-external/next.config.js | 2 +- test/e2e/transpile-packages/npm/next.config.js | 4 +--- test/production/jest/transpile-packages.test.ts | 2 +- 12 files changed, 36 insertions(+), 24 deletions(-) diff --git a/packages/next/build/jest/jest.ts b/packages/next/build/jest/jest.ts index 6f7c2432a66bd4f..9ba1fb0b2a9d5c3 100644 --- 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 index bf51537489005a5..ead6383ada78e36 100644 --- 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 index 98161d8ebdf4fb7..486857a7ac76658 100644 --- 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 index bc51ff125371a7a..b9f0718469b3ae2 100644 --- 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 index 3c9092bf6ca0f2c..cf7c04853b49b91 100644 --- 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 index 420eeab196b0e8a..4ee2607d43f85a5 100755 --- 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 index f5f4293dc00f60a..e6613681b08ce81 100644 --- 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 index e91dbfbd9072472..6b94aef5eb7b249 100644 --- 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 @@ -504,6 +501,9 @@ export interface NextConfig extends Record { 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 index e86ac58eb60b88b..87ddc26bd15e9ab 100644 --- 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 index 8e2dcc5de939fe7..038b9aae03ac3b6 100644 --- 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 index c1f282877d95bc4..2a3b4fff9f09a56 100644 --- 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 index fa7042dd5af3d11..1a11ca4fd05a43d 100644 --- 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: {