From 36de221e17cfb7f9ebf8a798e56d20b7c3a0c1a5 Mon Sep 17 00:00:00 2001
From: Luca Forstner <luca.forstner@sentry.io>
Date: Wed, 1 Feb 2023 08:18:51 +0000
Subject: [PATCH] fix(nextjs): Inject client config into `_app` instead of
 `main`

---
 packages/nextjs/src/config/webpack.ts                    | 9 +++++++--
 .../test/config/webpack/constructWebpackConfig.test.ts   | 8 ++++----
 2 files changed, 11 insertions(+), 6 deletions(-)

diff --git a/packages/nextjs/src/config/webpack.ts b/packages/nextjs/src/config/webpack.ts
index dcb37e935ff4..918d98f74cb4 100644
--- a/packages/nextjs/src/config/webpack.ts
+++ b/packages/nextjs/src/config/webpack.ts
@@ -473,8 +473,13 @@ function shouldAddSentryToEntryPoint(
     return entryPointName.startsWith('pages/');
   } else if (runtime === 'browser') {
     return (
-      entryPointName === 'main' || // entrypoint for `/pages` pages
-      entryPointName === 'main-app' // entrypoint for `/app` pages
+      // entrypoint for `/pages` pages - this is included on all clientside pages
+      // It's important that we inject the SDK into this file and not into 'main' because in 'main'
+      // some important Next.js code (like the setup code for getCongig()) is located and some users
+      // may need this code inside their Sentry configs
+      entryPointName === 'pages/_app' ||
+      // entrypoint for `/app` pages
+      entryPointName === 'main-app'
     );
   } else {
     // User-specified pages to skip. (Note: For ease of use, `excludeServerRoutes` is specified in terms of routes,
diff --git a/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts b/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts
index db27f13df67f..01f89bed1077 100644
--- a/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts
+++ b/packages/nextjs/test/config/webpack/constructWebpackConfig.test.ts
@@ -139,7 +139,7 @@ describe('constructWebpackConfigFunction()', () => {
       );
     });
 
-    it('injects user config file into `_app` in server bundle but not in client bundle', async () => {
+    it('injects user config file into `_app` in server bundle and in the client bundle', async () => {
       const finalServerWebpackConfig = await materializeFinalWebpackConfig({
         exportedNextConfig,
         incomingWebpackConfig: serverWebpackConfig,
@@ -158,7 +158,7 @@ describe('constructWebpackConfigFunction()', () => {
       );
       expect(finalClientWebpackConfig.entry).toEqual(
         expect.objectContaining({
-          'pages/_app': expect.not.arrayContaining([clientConfigFilePath]),
+          'pages/_app': expect.arrayContaining([clientConfigFilePath]),
         }),
       );
     });
@@ -233,9 +233,9 @@ describe('constructWebpackConfigFunction()', () => {
       });
 
       expect(finalWebpackConfig.entry).toEqual({
-        main: ['./sentry.client.config.js', './src/index.ts'],
+        main: './src/index.ts',
         // only _app has config file injected
-        'pages/_app': 'next-client-pages-loader?page=%2F_app',
+        'pages/_app': ['./sentry.client.config.js', 'next-client-pages-loader?page=%2F_app'],
         'pages/_error': 'next-client-pages-loader?page=%2F_error',
         'pages/sniffTour': ['./node_modules/smellOVision/index.js', 'private-next-pages/sniffTour.js'],
         'pages/simulator/leaderboard': {