fix(nextjs): Apply Webpack configuration in dev mode

packages/nextjs/src/config/withSentryConfig.ts

@@ -1,4 +1,4 @@
-import { isBuild } from '../utils/isBuild';
+import { NEXT_PHASE_DEVELOPMENT_SERVER, NEXT_PHASE_PRODUCTION_BUILD } from '../utils/phases';
 import type {
   ExportedNextConfig,
   NextConfigFunction,
@@ -18,23 +18,20 @@ export function withSentryConfig(
   exportedUserNextConfig: ExportedNextConfig = {},
   userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions> = {},
 ): NextConfigFunction | NextConfigObject {
-  // If the user has passed us a function, we need to return a function, so that we have access to `phase` and
-  // `defaults` in order to pass them along to the user's function
-  if (typeof exportedUserNextConfig === 'function') {
-    return function (phase: string, defaults: { defaultConfig: NextConfigObject }): NextConfigObject {
+  return function (phase: string, defaults: { defaultConfig: NextConfigObject }): NextConfigObject {
+    if (typeof exportedUserNextConfig === 'function') {
       const userNextConfigObject = exportedUserNextConfig(phase, defaults);
-
-      return getFinalConfigObject(userNextConfigObject, userSentryWebpackPluginOptions);
-    };
-  }
-
-  // Otherwise, we can just merge their config with ours and return an object.
-  return getFinalConfigObject(exportedUserNextConfig, userSentryWebpackPluginOptions);
+      return getFinalConfigObject(phase, userNextConfigObject, userSentryWebpackPluginOptions);
+    } else {
+      return getFinalConfigObject(phase, exportedUserNextConfig, userSentryWebpackPluginOptions);
+    }
+  };
 }
 
 // Modify the materialized object form of the user's next config by deleting the `sentry` property and wrapping the
 // `webpack` property
 function getFinalConfigObject(
+  phase: string,
   incomingUserNextConfigObject: NextConfigObjectWithSentry,
   userSentryWebpackPluginOptions: Partial<SentryWebpackPluginOptions>,
 ): NextConfigObject {
@@ -48,8 +45,8 @@ function getFinalConfigObject(
 
   // In order to prevent all of our build-time code from being bundled in people's route-handling serverless functions,
   // we exclude `webpack.ts` and all of its dependencies from nextjs's `@vercel/nft` filetracing. We therefore need to
-  // make sure that we only require it at build time.
-  if (isBuild()) {
+  // make sure that we only require it at build time or in development mode.
+  if (phase === NEXT_PHASE_PRODUCTION_BUILD || phase === NEXT_PHASE_DEVELOPMENT_SERVER) {
     // eslint-disable-next-line @typescript-eslint/no-var-requires
     const { constructWebpackConfigFunction } = require('./webpack');
     return {

packages/nextjs/src/utils/isBuild.ts

@@ -1,3 +1,5 @@
+import { NEXT_PHASE_PRODUCTION_BUILD } from './phases';
+
 /**
  * Decide if the currently running process is part of the build phase or happening at runtime.
  */
@@ -18,7 +20,7 @@ export function isBuild(): boolean {
     process.env.SENTRY_BUILD_PHASE ||
     // This is set by next, but not until partway through the build process, which is why we need the above checks. That
     // said, in case this function isn't called until we're in a child process, it can serve as a good backup.
-    process.env.NEXT_PHASE === 'phase-production-build'
+    process.env.NEXT_PHASE === NEXT_PHASE_PRODUCTION_BUILD
   ) {
     process.env.SENTRY_BUILD_PHASE = 'true';
     return true;

packages/nextjs/src/utils/phases.ts

@@ -0,0 +1,3 @@
+export const NEXT_PHASE_PRODUCTION_BUILD = 'phase-production-build';
+export const NEXT_PHASE_PRODUCTION_SERVER = 'phase-production-server';
+export const NEXT_PHASE_DEVELOPMENT_SERVER = 'phase-development-server';