@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!