fix(nextjs): Correctly handle functional next config in withSentryConfig (#3698)

The next config provided to `withSentryConfig` can be an object or a function, but we've only been handling the first case.

More details in PR description.

Author: lobsterkatie

packages/nextjs/src/config/index.ts

@@ -1,4 +1,4 @@
-import { ExportedNextConfig, NextConfigObject, SentryWebpackPluginOptions } from './types';
+import { ExportedNextConfig, NextConfigFunction, NextConfigObject, SentryWebpackPluginOptions } from './types';
 import { constructWebpackConfigFunction } from './webpack';
 
 /**
@@ -11,14 +11,22 @@ import { constructWebpackConfigFunction } from './webpack';
 export function withSentryConfig(
   userNextConfig: ExportedNextConfig = {},
   userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions> = {},
-): NextConfigObject {
+): NextConfigFunction {
   const newWebpackExport = constructWebpackConfigFunction(userNextConfig, userSentryWebpackPluginOptions);
 
-  const finalNextConfig = {
-    ...userNextConfig,
-    // TODO When we add a way to disable the webpack plugin, doing so should turn this off, too
-    productionBrowserSourceMaps: true,
-    webpack: newWebpackExport,
+  const finalNextConfig = (
+    phase: string,
+    defaults: { defaultConfig: { [key: string]: unknown } },
+  ): NextConfigObject => {
+    const materializedUserNextConfig =
+      typeof userNextConfig === 'function' ? userNextConfig(phase, defaults) : userNextConfig;
+
+    return {
+      ...materializedUserNextConfig,
+      // TODO When we add a way to disable the webpack plugin, doing so should turn this off, too
+      productionBrowserSourceMaps: true,
+      webpack: newWebpackExport,
+    };
   };
 
   return finalNextConfig;

packages/nextjs/src/config/types.ts

@@ -4,7 +4,7 @@ export { SentryCliPluginOptions as SentryWebpackPluginOptions } from '@sentry/we
  * Overall Nextjs config
  */
 
-export type ExportedNextConfig = NextConfigObject;
+export type ExportedNextConfig = NextConfigObject | NextConfigFunction;
 
 export type NextConfigObject = {
   // whether or not next should create source maps for browser code
@@ -17,6 +17,11 @@ export type NextConfigObject = {
   [key: string]: unknown;
 };
 
+export type NextConfigFunction = (
+  phase: string,
+  defaults: { defaultConfig: { [key: string]: unknown } },
+) => NextConfigObject;
+
 /**
  * Webpack config
  */

packages/nextjs/test/config.test.ts

@@ -62,7 +62,10 @@ function materializeFinalNextConfig(
   userNextConfig: ExportedNextConfig,
   userSentryWebpackPluginConfig: SentryWebpackPluginOptions,
 ): NextConfigObject {
-  const finalConfigValues = withSentryConfig(userNextConfig, userSentryWebpackPluginConfig);
+  const configFunction = withSentryConfig(userNextConfig, userSentryWebpackPluginConfig);
+  const finalConfigValues = configFunction('phase-production-build', {
+    defaultConfig: {},
+  });
 
   return finalConfigValues;
 }
@@ -128,6 +131,20 @@ describe('withSentryConfig', () => {
       }),
     );
   });
+
+  it("works when user's overall config is a function", () => {
+    const userNextConfigFunction = () => userNextConfig;
+
+    const finalConfig = materializeFinalNextConfig(userNextConfigFunction, userSentryWebpackPluginConfig);
+
+    expect(finalConfig).toEqual(
+      expect.objectContaining({
+        ...userNextConfigFunction(),
+        productionBrowserSourceMaps: true,
+        webpack: expect.any(Function), // `webpack` is tested specifically elsewhere
+      }),
+    );
+  });
 });
 
 describe('webpack config', () => {