Unable to use @sentry/react v8 in module federated React app.

[MegaDhakse2]

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?

Self-hosted/on-premise

Which SDK are you using?

@sentry/react

SDK Version

8.34.0

Framework Version

React 18.3.1

Link to Sentry event

No response

Reproduction Example/SDK Setup

import React, { StrictMode } from "react";
import { createRoot } from 'react-dom/client';
import { createBrowserRouter, RouterProvider } from "react-router-dom";
import { authRoutes } from "./routes/auth";
import { profile_routes } from "./routes/profile";
import { dash_routes } from "./routes/dash";
import * as Sentry from "@sentry/react";

const router = createBrowserRouter([
  {
    path: "/",
    // element: <Layout />,
    children: [
      ...authRoutes,
      ...profile_routes,
      ...dash_routes,
    ],
  },
]);


Sentry.init({
  dsn: "https://0af5d5d3a68b61bcf9ddbf6cf37bc16a@o4508091178483712.ingest.us.sentry.io/4508138187653120",
  integrations: [
    Sentry.browserTracingIntegration(),
    Sentry.replayIntegration(),
  ],
  // Tracing
  tracesSampleRate: 1.0, //  Capture 100% of the transactions
  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
  // Session Replay
  replaysSessionSampleRate: 0.1, 
  replaysOnErrorSampleRate: 1.0, 
});

const container = document.getElementById('root');
const root = createRoot(container);
root.render(
  <StrictMode>
    <RouterProvider router={router} />
  </StrictMode>
)

Here,
I have three react apps namely AuthApp, ProfileApp & DashApp, where all routes are serving from AuthApp and sentry is also configured in AuthApp.. Those remaining apps ProfileApp & DashApp getting from module federation. That's the problem here. If i disabled those module federation connected apps, it works fine. If i included it getting the below warning

WARNING in shared module @sentry/react -> /usr/src/app/node_modules/@sentry/react/build/esm/index.js 
No version specified and unable to automatically determine one. No version in description file (usually package.json).
Add version to description file /usr/src/app/node_modules/@sentry/react/build/esm/package.json, 
or manually specify version in shared config. 

Connecting other react apps using Module Federation Configuration:
In webpack config file:

const { ModuleFederationPlugin } = require("webpack").container;

    new ModuleFederationPlugin({
      name: "loginApp",
      remotes: {
        profileApp: `profileApp@${domain}:4002/remoteProfileEntry.js`,
        dashApp: `dashApp@${domain}:4001/remoteCommonEntry.js`,
      },
       shared: {
         react: {
           requiredVersion: "17.0.2",
           singleton: true,
           eager: true,
         },
         "react-dom": {
           requiredVersion: "17.0.2",
           singleton: true,
           eager: true,
         },
        "@sentry/react": {
           requiredVersion: "8.34.0",
           singleton: true,
           eager: true,
         },
      },
    }),

Steps to Reproduce

Step1: Create two or more react dummy apps.
Step2: Connect all three apps using Module Federation in webpack config file as above.
const { ModuleFederationPlugin } = require("webpack").container;
Step3: Make one app as main and serve your react routes from there.
Step4: Finally integrate the @sentry/react@8.34.0 to the main app where all the routes are serving.
Step5: If you did the above steps correctly, you will notice a waring in the UI.. All works fine the errors are catching by it, getting email and displaying in account issues dashboard.. But getting warning on the SCREEN which we can't move further.

Step6: Disabling that modully connected apps all works fine without the error.

Expected Result

Need to avoid the below warning in react module federation connected apps, like how it works in standalone react apps.
Disabling that modully connected apps all works fine without the error. But i need use sentry/react in module federation apps also without any errors.

Actual Result

need use sentry/react in module federation apps also without any errors.

[chargome]

Hey @MegaDhakse2 this rather looks like a webpack error for module federation. The only thing I spotted here is that you have set a required version 18.34.0 for @sentry/reactwhich does not exist.

[Christian-Oleson]

I have this same issue and I am not using @sentry/react, but instead am just using @sentry/browser. I get:

No version specified and unable to automatically determine one. No version in description file (usually package.json). Add version to description file C:\Projects\myProject\node_modules\@sentry\browser\build\npm\esm\package.json, or manually specify version in shared config.

[MegaDhakse2]

Hey @MegaDhakse2 this rather looks like a webpack error for module federation. The only thing I spotted here is that you have set a required version 18.34.0 for @sentry/reactwhich does not exist.

Sorry the version i specified was a typo.. my mistake.. I have changed it to 8.34.0 .
Ok.. you are telling this is a webpack error.. But occuring while using sentry right, Can't we handle this here...

[lforst]

Hi, can you please raise this with the Module Federation project? I don't think we are doing anything wrong in the SDK.

[MegaDhakse2]

Hi Mr. @lforst this issue was fixed in the version @sentry@8.35.0-beta.0
Must be fixed in https://github.com/getsentry/sentry-javascript/releases/tag/8.35.0-beta.0

Exact commit is here: 5127bb7

This new beta version is working fine in module federation react apps also. I will close this issue once the version released officially without beta tag.
Thanks all. Thanks ZakrepaShe

[MegaDhakse2]

Finally we got this issue fixed in the newly released minor version @sentry/react@8.35.0.
Use the latest you won't face this issue. 😎🎉

[Christian-Oleson]

I confirmed that this is working for me. Thank you!