From cf2cde9abd787756a6c6a8848b22933070304f9c Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 10 May 2024 15:21:27 +0000 Subject: [PATCH 1/2] feat(nextjs): Remove `transpileClientSDK` --- MIGRATION.md | 6 ++++++ packages/nextjs/src/config/types.ts | 6 ------ packages/nextjs/src/config/webpack.ts | 29 --------------------------- 3 files changed, 6 insertions(+), 35 deletions(-) diff --git a/MIGRATION.md b/MIGRATION.md index ef1f17dcfe7d..1f42b676e823 100644 --- a/MIGRATION.md +++ b/MIGRATION.md @@ -866,6 +866,12 @@ in order to inject the `sentry.(server|edge).config.ts` files into the server-si possible in the future, we are doing ourselves a favor and doing things the way Next.js intends us to do them - hopefully reducing bugs and jank. +#### Removal of `transpileClientSDK` + +Since we are dropping support for Internet Explorer 11 and other other older browser versions, we are also removing the +`transpileClientSDK` option from the Next.js SDK. If you need to support these browser versions, please configure +Webpack and Next.js to down-compile the SDK. + ### Astro SDK - [Removal of `trackHeaders` option for Astro middleware](./MIGRATION.md#removal-of-trackheaders-option-for-astro-middleware) diff --git a/packages/nextjs/src/config/types.ts b/packages/nextjs/src/config/types.ts index 43f45ce1bbcf..f748c5beb115 100644 --- a/packages/nextjs/src/config/types.ts +++ b/packages/nextjs/src/config/types.ts @@ -334,12 +334,6 @@ export type SentryBuildOptions = { */ hideSourceMaps?: boolean; - /** - * Instructs webpack to apply the same transpilation rules to the SDK code as apply to user code. Helpful when - * targeting older browsers which don't support ES6 (or ES6+ features like object spread). - */ - transpileClientSDK?: boolean; - /** * Include Next.js-internal code and code from dependencies when uploading source maps. * diff --git a/packages/nextjs/src/config/webpack.ts b/packages/nextjs/src/config/webpack.ts index a9e98cbb7d71..f60a46116f0b 100644 --- a/packages/nextjs/src/config/webpack.ts +++ b/packages/nextjs/src/config/webpack.ts @@ -305,35 +305,6 @@ export function constructWebpackConfigFunction( } } - // TODO(v8): Remove this logic since we are deprecating es5. - // The SDK uses syntax (ES6 and ES6+ features like object spread) which isn't supported by older browsers. For users - // who want to support such browsers, `transpileClientSDK` allows them to force the SDK code to go through the same - // transpilation that their code goes through. We don't turn this on by default because it increases bundle size - // fairly massively. - if (!isServer && userSentryOptions?.transpileClientSDK) { - // Find all loaders which apply transpilation to user code - const transpilationRules = findTranspilationRules(newConfig.module?.rules, projectDir); - - // For each matching rule, wrap its `exclude` function so that it won't exclude SDK files, even though they're in - // `node_modules` (which is otherwise excluded) - transpilationRules.forEach(rule => { - // All matching rules will necessarily have an `exclude` property, but this keeps TS happy - if (rule.exclude && typeof rule.exclude === 'function') { - const origExclude = rule.exclude; - - const newExclude = (filepath: string): boolean => { - if (filepath.includes('@sentry')) { - // `false` in this case means "don't exclude it" - return false; - } - return origExclude(filepath); - }; - - rule.exclude = newExclude; - } - }); - } - if (!isServer) { // Tell webpack to inject the client config files (containing the client-side `Sentry.init()` call) into the appropriate output // bundles. Store a separate reference to the original `entry` value to avoid an infinite loop. (If we don't do From 56acf1b7899b5960907a740de7d699c0139e5434 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 10 May 2024 15:34:14 +0000 Subject: [PATCH 2/2] rm unused code --- packages/nextjs/src/config/webpack.ts | 67 --------------------------- 1 file changed, 67 deletions(-) diff --git a/packages/nextjs/src/config/webpack.ts b/packages/nextjs/src/config/webpack.ts index f60a46116f0b..20c37699bcf1 100644 --- a/packages/nextjs/src/config/webpack.ts +++ b/packages/nextjs/src/config/webpack.ts @@ -20,7 +20,6 @@ import type { WebpackConfigObject, WebpackConfigObjectWithModuleRules, WebpackEntryProperty, - WebpackModuleRule, } from './types'; import { getWebpackPluginOptions } from './webpackPluginOptions'; @@ -356,72 +355,6 @@ export function constructWebpackConfigFunction( }; } -/** - * Determine if this `module.rules` entry is one which will transpile user code - * - * @param rule The rule to check - * @param projectDir The path to the user's project directory - * @returns True if the rule transpiles user code, and false otherwise - */ -function isMatchingRule(rule: WebpackModuleRule, projectDir: string): boolean { - // We want to run our SDK code through the same transformations the user's code will go through, so we test against a - // sample user code path - const samplePagePath = path.resolve(projectDir, 'pageFile.js'); - if (rule.test && rule.test instanceof RegExp && !rule.test.test(samplePagePath)) { - return false; - } - if (Array.isArray(rule.include) && !rule.include.includes(projectDir)) { - return false; - } - - // `rule.use` can be an object or an array of objects. For simplicity, force it to be an array. - const useEntries = arrayify(rule.use); - - // Depending on the version of nextjs we're talking about, the loader which does the transpiling is either - // - // 'next-babel-loader' (next 10), - // '/abs/path/to/node_modules/next/more/path/babel/even/more/path/loader/yet/more/path/index.js' (next 11), or - // 'next-swc-loader' (next 12). - // - // The next 11 option is ugly, but thankfully 'next', 'babel', and 'loader' do appear in it in the same order as in - // 'next-babel-loader', so we can use the same regex to test for both. - if (!useEntries.some(entry => entry?.loader && /next.*(babel|swc).*loader/.test(entry.loader))) { - return false; - } - - return true; -} - -/** - * Find all rules in `module.rules` which transpile user code. - * - * @param rules The `module.rules` value - * @param projectDir The path to the user's project directory - * @returns An array of matching rules - */ -function findTranspilationRules(rules: WebpackModuleRule[] | undefined, projectDir: string): WebpackModuleRule[] { - if (!rules) { - return []; - } - - const matchingRules: WebpackModuleRule[] = []; - - // Each entry in `module.rules` is either a rule in and of itself or an object with a `oneOf` property, whose value is - // an array of rules - rules.forEach(rule => { - // if (rule.oneOf) { - if (isMatchingRule(rule, projectDir)) { - matchingRules.push(rule); - } else if (rule.oneOf) { - const matchingOneOfRules = rule.oneOf.filter(oneOfRule => isMatchingRule(oneOfRule, projectDir)); - matchingRules.push(...matchingOneOfRules); - // } else if (isMatchingRule(rule, projectDir)) { - } - }); - - return matchingRules; -} - /** * Modify the webpack `entry` property so that the code in `sentry.client.config.js` is * included in the the necessary bundles.