fix(nextjs): Fix typing issue with withSentryConfig and NextConfig (#5967)

Author: timfish

Diff for: packages/nextjs/package.json

@@ -66,7 +66,8 @@
     "test": "run-s test:unit",
     "test:all": "run-s test:unit test:integration",
     "test:unit": "jest",
-    "test:integration": "test/run-integration-tests.sh",
+    "test:integration": "test/run-integration-tests.sh && yarn test:types",
+    "test:types": "cd test/types && yarn test",
     "test:watch": "jest --watch",
     "vercel:branch": "source vercel/set-up-branch-for-test-app-use.sh",
     "vercel:project": "source vercel/make-project-use-current-branch.sh"

Diff for: packages/nextjs/src/config/types.ts

@@ -23,7 +23,7 @@ export type NextConfigFunctionWithSentry = (
 
 export type NextConfigObject = {
   // Custom webpack options
-  webpack?: WebpackConfigFunction;
+  webpack?: WebpackConfigFunction | null;
   // Whether to build serverless functions for all pages, not just API routes. Removed in nextjs 12+.
   target?: 'server' | 'experimental-serverless-trace';
   // The output directory for the built app (defaults to ".next")
@@ -93,8 +93,13 @@ export type BuildContext = {
   isServer: boolean;
   buildId: string;
   dir: string;
-  config: NextConfigObject;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  config: any;
   webpack: { version: string };
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  defaultLoaders: any;
+  totalPages: number;
+  nextRuntime?: 'nodejs' | 'edge';
 };
 
 /**

Diff for: packages/nextjs/src/config/webpack.ts

@@ -410,7 +410,9 @@ export function getWebpackPluginOptions(
   userPluginOptions: Partial<SentryWebpackPluginOptions>,
   userSentryOptions: UserSentryOptions,
 ): SentryWebpackPluginOptions {
-  const { buildId, isServer, webpack, config: userNextConfig, dev: isDev, dir: projectDir } = buildContext;
+  const { buildId, isServer, webpack, config, dev: isDev, dir: projectDir } = buildContext;
+  const userNextConfig = config as NextConfigObject;
+
   const distDir = userNextConfig.distDir ?? '.next'; // `.next` is the default directory
 
   const isWebpack5 = webpack.version.startsWith('5');

Diff for: packages/nextjs/test/config/fixtures.ts

@@ -93,6 +93,8 @@ export function getBuildContext(
       ...materializedNextConfig,
     } as NextConfigObject,
     webpack: { version: webpackVersion },
+    defaultLoaders: true,
+    totalPages: 2,
     isServer: buildTarget === 'server',
   };
 }

Diff for: packages/nextjs/test/types/.gitignore

@@ -0,0 +1,2 @@
+node_modules/
+yarn.lock

Diff for: packages/nextjs/test/types/next.config.ts

@@ -0,0 +1,18 @@
+import { NextConfig } from 'next';
+
+import { withSentryConfig } from '../../src/config';
+
+const config: NextConfig = {
+  hideSourceMaps: true,
+  webpack: config => ({
+    ...config,
+    module: {
+      ...config.module,
+      rules: [...config.module.rules],
+    },
+  }),
+};
+
+module.exports = withSentryConfig(config, {
+  validate: true,
+});

Diff for: packages/nextjs/test/types/package.json

@@ -0,0 +1,9 @@
+{
+  "description": "This is used to install the nextjs v12 so we can test against those types",
+  "scripts": {
+    "test": "ts-node test.ts"
+  },
+  "dependencies": {
+    "next": "12.3.1"
+  }
+}

Diff for: packages/nextjs/test/types/test.ts

@@ -0,0 +1,12 @@
+/* eslint-disable no-console */
+import { parseSemver } from '@sentry/utils';
+import { execSync } from 'child_process';
+
+const NODE_VERSION = parseSemver(process.versions.node);
+
+if (NODE_VERSION.major && NODE_VERSION.major >= 12) {
+  console.log('Installing next@v12...');
+  execSync('yarn install', { stdio: 'inherit' });
+  console.log('Testing some types...');
+  execSync('tsc --noEmit --project tsconfig.json', { stdio: 'inherit' });
+}

Diff for: packages/nextjs/test/types/tsconfig.json

@@ -0,0 +1,6 @@
+{
+  "extends": "../tsconfig.json",
+  "include": [
+    "./**/*"
+  ]
+}