move userNextConfig.sentry into a closure in constructWebpackConfigFunction

Author: lobsterkatie

packages/nextjs/src/config/index.ts

@@ -17,16 +17,33 @@ export function withSentryConfig(
   if (typeof userNextConfig === 'function') {
     return function (phase: string, defaults: { defaultConfig: NextConfigObject }): Partial<NextConfigObject> {
       const materializedUserNextConfig = userNextConfig(phase, defaults);
+
+      // Next 12.2.3+ warns about non-canonical properties on `userNextConfig`, so grab and then remove the `sentry`
+      // property there. Where we actually need it is in the webpack config function we're going to create, so pass it
+      // to `constructWebpackConfigFunction` so that it will be in the created function's closure.
+      const { sentry: userSentryOptions } = materializedUserNextConfig;
+      delete materializedUserNextConfig.sentry;
+
       return {
         ...materializedUserNextConfig,
-        webpack: constructWebpackConfigFunction(materializedUserNextConfig, userSentryWebpackPluginOptions),
+        webpack: constructWebpackConfigFunction(
+          materializedUserNextConfig,
+          userSentryWebpackPluginOptions,
+          userSentryOptions,
+        ),
       };
     };
   }
 
   // Otherwise, we can just merge their config with ours and return an object.
+
+  // Prevent nextjs from getting mad about having a non-standard config property in `userNextConfig`. (See note above
+  // for a more thorough explanation of what we're doing here.)
+  const { sentry: userSentryOptions } = userNextConfig;
+  delete userNextConfig.sentry;
+
   return {
     ...userNextConfig,
-    webpack: constructWebpackConfigFunction(userNextConfig, userSentryWebpackPluginOptions),
+    webpack: constructWebpackConfigFunction(userNextConfig, userSentryWebpackPluginOptions, userSentryOptions),
   };
 }

packages/nextjs/src/config/webpack.ts

@@ -10,6 +10,7 @@ import {
   EntryPropertyObject,
   NextConfigObject,
   SentryWebpackPluginOptions,
+  UserSentryOptions,
   WebpackConfigFunction,
   WebpackConfigObject,
   WebpackEntryProperty,
@@ -36,6 +37,7 @@ export { SentryWebpackPlugin };
 export function constructWebpackConfigFunction(
   userNextConfig: Partial<NextConfigObject> = {},
   userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions> = {},
+  userSentryOptions: UserSentryOptions = {},
 ): WebpackConfigFunction {
   // Will be called by nextjs and passed its default webpack configuration and context data about the build (whether
   // we're building server or client, whether we're in dev, what version of webpack we're using, etc). Note that
@@ -93,9 +95,7 @@ export function constructWebpackConfigFunction(
       // with the `--ignore-scripts` option, this will be blocked and the missing binary will cause an error when users
       // try to build their apps.)
       ensureCLIBinaryExists() &&
-      (isServer
-        ? !userNextConfig.sentry?.disableServerWebpackPlugin
-        : !userNextConfig.sentry?.disableClientWebpackPlugin);
+      (isServer ? !userSentryOptions.disableServerWebpackPlugin : !userSentryOptions.disableClientWebpackPlugin);
 
     if (enableWebpackPlugin) {
       // TODO Handle possibility that user is using `SourceMapDevToolPlugin` (see
@@ -109,12 +109,14 @@ export function constructWebpackConfigFunction(
         // the browser won't look for them and throw errors into the console when it can't find them. Because this is a
         // front-end-only problem, and because `sentry-cli` handles sourcemaps more reliably with the comment than
         // without, the option to use `hidden-source-map` only applies to the client-side build.
-        newConfig.devtool = userNextConfig.sentry?.hideSourceMaps && !isServer ? 'hidden-source-map' : 'source-map';
+        newConfig.devtool = userSentryOptions.hideSourceMaps && !isServer ? 'hidden-source-map' : 'source-map';
       }
 
       newConfig.plugins = newConfig.plugins || [];
       newConfig.plugins.push(
-        new SentryWebpackPlugin(getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions)),
+        new SentryWebpackPlugin(
+          getWebpackPluginOptions(buildContext, userSentryWebpackPluginOptions, userSentryOptions),
+        ),
       );
     }
 
@@ -286,6 +288,7 @@ function shouldAddSentryToEntryPoint(entryPointName: string, isServer: boolean):
 export function getWebpackPluginOptions(
   buildContext: BuildContext,
   userPluginOptions: Partial<SentryWebpackPluginOptions>,
+  userSentryOptions: UserSentryOptions,
 ): SentryWebpackPluginOptions {
   const { buildId, isServer, webpack, config: userNextConfig, dev: isDev, dir: projectDir } = buildContext;
   const distDir = userNextConfig.distDir ?? '.next'; // `.next` is the default directory
@@ -301,14 +304,14 @@ export function getWebpackPluginOptions(
         isWebpack5 ? [{ paths: [`${distDir}/server/chunks/`], urlPrefix: `${urlPrefix}/server/chunks` }] : [],
       );
 
-  const clientInclude = userNextConfig.sentry?.widenClientFileUpload
+  const clientInclude = userSentryOptions.widenClientFileUpload
     ? [{ paths: [`${distDir}/static/chunks`], urlPrefix: `${urlPrefix}/static/chunks` }]
     : [{ paths: [`${distDir}/static/chunks/pages`], urlPrefix: `${urlPrefix}/static/chunks/pages` }];
 
   const defaultPluginOptions = dropUndefinedKeys({
     include: isServer ? serverInclude : clientInclude,
     ignore:
-      isServer || !userNextConfig.sentry?.widenClientFileUpload
+      isServer || !userSentryOptions.widenClientFileUpload
         ? []
         : // Widening the upload scope is necessarily going to lead to us uploading files we don't need to (ones which
           // don't include any user code). In order to lessen that where we can, exclude the internal nextjs files we know