Chunking @sentry/react results in “Multiple Sentry Session Replay instances are not supported” error

[daraclare]

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/react

SDK Version

^8.47.0

Framework Version

React 18.2

Link to Sentry event

https://viasat-c0.sentry.io/issues/6199709160/?environment=production&project=4506784165658624&referrer=project-issue-stream&statsPeriod=24h

Reproduction Example/SDK Setup

import React from "react";
import ReactDOM from "react-dom/client";
import {
  init,
  browserTracingIntegration,
  replayIntegration,
  captureConsoleIntegration,
} from "@sentry/react";
import App from "@/src/App.jsx";
import { getEnv } from "@/src/envUtils.js";
import packageProps from "@root/package.json";
 
const isDev = getEnv("MODE") !== "production";
 
init({
  release: `Ad Units: v${packageProps.version}`,
  environment: getEnv("MODE"),
  dsn: getEnv("VITE_SENTRY_DSN"),
  integrations: [
    browserTracingIntegration(),
    replayIntegration({
      maskAllText: false,
      blockAllMedia: false,
      maskAllInputs: true,
    }),
    captureConsoleIntegration({
      levels: ["error"],
    }),
  ],
 
  // Performance Monitoring
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^\//],
  // Session Replay
  replaysSessionSampleRate: 0, // This sets the sample rate at 0%. You may want to change it to 100% while in development and then sample at a lower rate in production.
  replaysOnErrorSampleRate: isDev ? 0 : 0.5, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
});

Steps to Reproduce

1. Build a vite app using React, and initialise Sentry as above in the main file (i.e. before the App component),
2. Every works as expected, until you add chunking to the vite config and chunk sentry/react, see below:

export default () => {
  return defineConfig({
    plugins: [react()],
    build: {
      lib: {
        entry: resolve(__dirname, "src/main.jsx"),
        name: "adunits",
        fileName: "index",
        formats: ["es"],
      },
      rollupOptions: {
        output: {
          entryFileNames: "index.js",
          assetFileNames: "index.css",
          manualChunks: {
            sentryreact: ["@sentry/react"],
          },
        },
      },
    },
  });
};

Now the error “Multiple Sentry Session Replay instances are not supported” occurs in Sentry in production.

Expected Result

No error should occur

Actual Result

“Multiple Sentry Session Replay instances are not supported” error occurs

[chargome]

Hey @daraclare thanks for reaching out!

That is just a wild guess but since replay is installed with a different package your config might mess up the setup.
Could you try updating your manualChunks to something like

function manualChunks(id) {
	if (id.includes('node_modules/@sentry')) { // or includes('@sentry') idk
		return 'sentry';
	}
}

and see if that helps?