@sentry/nextjs bundled twice

[r34son]

Is there an existing issue for this?

• I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
• I have reviewed the documentation https://docs.sentry.io/
• I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/nextjs

SDK Version

7.109.0

Framework Version

No response

Link to Sentry event

No response

SDK Setup

import {
 BrowserClient,
 breadcrumbsIntegration,
 dedupeIntegration,
 defaultStackParser,
 globalHandlersIntegration,
 makeFetchTransport,
 linkedErrorsIntegration,
 setCurrentClient,
} from '@sentry/nextjs';
import { SENTRY_CAPTURE_RATE, SENTRY_DSN } from 'sentry.constants.mjs';

const client = new BrowserClient({
 dsn: SENTRY_DSN,
 tracesSampleRate: SENTRY_CAPTURE_RATE,
 replaysOnErrorSampleRate: 1,
 replaysSessionSampleRate: 0.1,
 transport: makeFetchTransport,
 stackParser: defaultStackParser,
 environment: process.env.NEXT_PUBLIC_ENV,
 integrations: [
 breadcrumbsIntegration(),
 globalHandlersIntegration(),
 linkedErrorsIntegration(),
 dedupeIntegration(),
 ],
});

setCurrentClient(client);

// Loads this Dynamically to avoid adding this to the main bundle (initial load)
import('@sentry/nextjs').then(({ Replay, BrowserTracing }) => {
 client.addIntegration(new Replay({ maskAllText: false }));
 client.addIntegration(new BrowserTracing({ enableInp: true }));
});

Steps to Reproduce

clone https://github.com/r34son/profile/tree/sentry
pnpm i
pnpm analyze

Expected Result

sdk loaded only in one chunk

Actual Result

sdk loaded in two separate chunks

[AbhiPrasad]

Webpack is not smart enough to treeshake the following statement (it doesn't work well with object destructure so it grabs every export):

// Loads this Dynamically to avoid adding this to the main bundle (initial load)
import('@sentry/nextjs').then(({ Replay, BrowserTracing }) => {
 client.addIntegration(new Replay({ maskAllText: false }));
 client.addIntegration(new BrowserTracing({ enableInp: true }));
});

The above statement will include the entire @sentry/nextjs bundle.

Instead you should explicitly define your exports. In your sentry.client.config.ts you can have something like so:

// In sentry.client.config.ts
import('./dynamicSentryImport').then(({ importSentryIntegrations }) => {
 importSentryIntegrations();
});

and then in dynamicSentryImport.ts file next to your sentry.client.config.ts:

// In dynamicSentryImport.ts
import { Replay, BrowserTracing, getClient } from '@sentry/nextjs';

// Loads this Dynamically to avoid adding this to the main bundle (initial load)
export function importSentryIntegrations() {
 const client = getClient();
 if (client && client.addIntegration) {
 client.addIntegration(new Replay({ maskAllText: false }));
 client.addIntegration(new BrowserTracing({ enableInp: true }));
 }
}

Please keep this in mind for other libraries you use as well!

[r34son]

Oh, got you. Webpack sees import('@sentry/nextjs') and moves it to separate chunk (and doesn't treeshake), that`s why i was getting sentry bundled 2 times. Thanks @AbhiPrasad!