fix(nextjs): Differentiate between webpack 4 and 5 in server builds (#3878)

In order to cut down on the number of unnecessary files which get uploaded  by the Sentry webpack plugin during nextjs builds, we're quite specific about which filepaths to scan. The change which introduced that specificity[1] missed the fact that under webpack 4, `.next/server/chunks` is not generated. This leads the Sentry webpack plugin to throw an error when it tries to upload it, even though nothing is actually amiss.

This PR fixes that, by checking the webpack version before deciding which files to upload with the plugin.

[1] #3845

Author: lobsterkatie

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 - "You miss 100 percent of the chances you don't take. — Wayne Gretzky" — Michael Scott
 
+fix(nextjs): Differentiate between webpack 4 and 5 in server builds  (#FIXME!!)
+
 ## 6.11.0
 
 - feat(nextjs): Allow for TypeScript user config files (#3847)

packages/nextjs/src/config/types.ts

@@ -54,6 +54,7 @@ export type BuildContext = {
   buildId: string;
   dir: string;
   config: Partial<NextConfigObject>;
+  webpack: { version: string };
 };
 
 /**

packages/nextjs/src/config/webpack.ts

@@ -242,17 +242,18 @@ function getWebpackPluginOptions(
   buildContext: BuildContext,
   userPluginOptions: Partial<SentryWebpackPluginOptions>,
 ): SentryWebpackPluginOptions {
-  const { isServer, dir: projectDir, buildId, dev: isDev, config: nextConfig } = buildContext;
+  const { isServer, dir: projectDir, buildId, dev: isDev, config: nextConfig, webpack } = buildContext;
 
+  const isWebpack5 = webpack.version.startsWith('5');
   const isServerless = nextConfig.target === 'experimental-serverless-trace';
   const hasSentryProperties = fs.existsSync(path.resolve(projectDir, 'sentry.properties'));
 
   const serverInclude = isServerless
     ? [{ paths: ['.next/serverless/'], urlPrefix: '~/_next/serverless' }]
-    : [
-        { paths: ['.next/server/chunks/'], urlPrefix: '~/_next/server/chunks' },
-        { paths: ['.next/server/pages/'], urlPrefix: '~/_next/server/pages' },
-      ];
+    : [{ paths: ['.next/server/pages/'], urlPrefix: '~/_next/server/pages' }].concat(
+        isWebpack5 ? [{ paths: ['.next/server/chunks/'], urlPrefix: '~/_next/server/chunks' }] : [],
+      );
+
   const clientInclude = [{ paths: ['.next/static/chunks/pages'], urlPrefix: '~/_next/static/chunks/pages' }];
 
   const defaultPluginOptions = dropUndefinedKeys({

packages/nextjs/test/config.test.ts

@@ -89,6 +89,7 @@ const baseBuildContext = {
   buildId: 'sItStAyLiEdOwN',
   dir: '/Users/Maisey/projects/squirrelChasingSimulator',
   config: { target: 'server' as const },
+  webpack: { version: '5.4.15' },
 };
 const serverBuildContext = { isServer: true, ...baseBuildContext };
 const clientBuildContext = { isServer: false, ...baseBuildContext };
@@ -389,7 +390,21 @@ describe('Sentry webpack plugin config', () => {
       ]);
     });
 
-    it('has the correct value when building serverful server bundles', async () => {
+    it('has the correct value when building serverful server bundles using webpack 4', async () => {
+      const finalWebpackConfig = await materializeFinalWebpackConfig({
+        userNextConfig,
+        incomingWebpackConfig: serverWebpackConfig,
+        incomingWebpackBuildContext: { ...serverBuildContext, webpack: { version: '4.15.13' } },
+      });
+
+      const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
+
+      expect(sentryWebpackPlugin.options?.include).toEqual([
+        { paths: ['.next/server/pages/'], urlPrefix: '~/_next/server/pages' },
+      ]);
+    });
+
+    it('has the correct value when building serverful server bundles using webpack 5', async () => {
       const finalWebpackConfig = await materializeFinalWebpackConfig({
         userNextConfig,
         incomingWebpackConfig: serverWebpackConfig,
@@ -399,8 +414,8 @@ describe('Sentry webpack plugin config', () => {
       const sentryWebpackPlugin = finalWebpackConfig.plugins?.[0] as SentryWebpackPluginType;
 
       expect(sentryWebpackPlugin.options?.include).toEqual([
-        { paths: ['.next/server/chunks/'], urlPrefix: '~/_next/server/chunks' },
         { paths: ['.next/server/pages/'], urlPrefix: '~/_next/server/pages' },
+        { paths: ['.next/server/chunks/'], urlPrefix: '~/_next/server/chunks' },
       ]);
     });
   });