reactComponentAnnotation not working in react-router framework project

[derekr]

Environment

"react": "^19.0.0",
"babel-plugin-react-compiler": "19.0.0-beta-df7b47d-20241124",

npm list --depth=0 | grep sentry
├── @sentry/profiling-node@9.24.0 -> ./node_modules/.pnpm/@sentry+profiling-node@9.24.0/node_modules/@sentry/profiling-node
├── @sentry/react-router@9.24.0 -> ./node_modules/.pnpm/@sentry+react-router@9.24.0_@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0._4e5a7a9242170d6fa6f4b97d0883c61b/node_modules/@sentry/react-router
├── pino-sentry-transport@1.5.0 -> ./node_modules/.pnpm/pino-sentry-transport@1.5.0_patch_hash=db53541e3cb70bf23686dde292b78778fb3bdb1b004999a2_bb3829d098d7e4553bdfa89500623f30/node_modules/pino-sentry-transport

npm list --depth=0 | grep react-router

├── @react-router/dev@7.6.0 -> ./node_modules/.pnpm/@react-router+dev@7.6.0_@types+node@22.15.21_jiti@2.4.2_lightningcss@1.29.1_react-route_f75de3eee766fc6a692d5fd6c73a91e6/node_modules/@react-router/dev
├── @react-router/express@7.6.0 -> ./node_modules/.pnpm/@react-router+express@7.6.0_express@4.21.2_react-router@7.6.0_react-dom@19.0.0_react@19_9f42d7d704a8cb5c044ff4876964a7c1/node_modules/@react-router/express
├── @react-router/fs-routes@7.6.0 -> ./node_modules/.pnpm/@react-router+fs-routes@7.6.0_@react-router+dev@7.6.0_@types+node@22.15.21_jiti@2.4.2_l_9c30972203d0fd38fea6abc06c22e547/node_modules/@react-router/fs-routes
├── @react-router/node@7.6.0 -> ./node_modules/.pnpm/@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0__typescript@5.8.2/node_modules/@react-router/node
├── @sentry/react-router@9.24.0 -> ./node_modules/.pnpm/@sentry+react-router@9.24.0_@react-router+node@7.6.0_react-router@7.6.0_react-dom@19.0._4e5a7a9242170d6fa6f4b97d0883c61b/node_modules/@sentry/react-router
├── @tanstack/react-router@1.35.3 -> ./node_modules/.pnpm/@tanstack+react-router@1.35.3_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/@tanstack/react-router
├── react-router@7.6.0 -> ./node_modules/.pnpm/react-router@7.6.0_react-dom@19.0.0_react@19.0.0__react@19.0.0/node_modules/react-router

Steps to Reproduce

1. Modified vite.config.ts to enable reactComponentAnnotation.
2. Commented out any potential competing plugins
3. Tried babel plugin directly

Sample plugins from vite.config.ts

const plugins: PluginOption[] = [
        reactRouter(),
        sentryReactRouter(
            {
                org: 'basedash',
                project: 'basedash-charts',
                sourceMapsUploadOptions: {
                    enabled: IS_SENTRY_AUTH_TOKEN_AVAILABLE,
                },
                release: IS_SENTRY_AUTH_TOKEN_AVAILABLE
                    ? {
                            name:
                                process.env.RELEASE_VERSION?.split(':').slice(-1)[0] ?? 'local',
                        }
                    : undefined,
                unstable_sentryVitePluginOptions: {
                    reactComponentAnnotation: {
                        enabled: true,
                        ignoredComponents: ['Fragment'],
                    },
                },
            },
            config,
        ),
        tsconfigPaths(),
        Boolean(process.env.CODECOV_TOKEN) &&
            codecovRemixVitePlugin({
                enableBundleAnalysis: process.env.NODE_ENV === 'production',
                bundleName: 'basedash-charts-bundle',
                uploadToken: process.env.CODECOV_TOKEN,
                // Needed since we run the build in Docker where codecov can't automatically
                // determine git/github context.
                uploadOverrides: {
                    slug: 'basedash/charts',
                    branch: process.env.GIT_BRANCH,
                    pr: process.env.GITHUB_PR_NUMBER,
                    sha: process.env.GIT_SHA,
                    compareSha: process.env.GITHUB_COMPARE_SHA,
                },
            }),
        svgr(),
        // ReactComponentName({}),

        tailwindcss(),
        // babel({
        //     include: '/app/**/*',
        //     filter: /\.[jt]sx?$/,
        //     babelConfig: {
        //         presets: ['@babel/preset-typescript'],
        //         plugins: [['babel-plugin-react-compiler', {}]],
        //     },
        // }),
        process.env.SENTRY_SPOTLIGHT === 'true' && spotlightSidecar(),
        process.env.SENTRY_SPOTLIGHT === 'true' && spotlight(),
        // Bundle analysis
        // > pnpm build
        // > open build/client/stats.html
        // > open build/server/stats.html
        process.env.VITE_ANALYZE === 'true' &&
            visualizer({ emitFile: true, template: 'treemap' }),
    ];

Expected Result

Elements in dom inspector to be annotated w/ sentry data attributes.

Actual Result

No sentry data attributes are found in the dom.

[s1gr1d]

Hello, can you add debug: true to the root options of the sentryReactRouter plugin and check if there is some log output about whether it's not set up?

[derekr]

@s1gr1d Added debug true to both the top level plugin config as well as the unstable_sentryVitePluginOptions, but didn't see any additional output related to the annotation option. I had AI filter out anything that wasn't from sentry in my vote build output:

[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[sentry-vite-plugin] Info: Sending telemetry data on issues and performance to Sentry. To disable telemetry, set `options.telemetry` to `false`.
[Sentry] Automatically setting `sourceMapsUploadOptions.filesToDeleteAfterUpload: [".../build/**/*.map"]` to delete generated source maps after they were uploaded to Sentry.

[s1gr1d]

Transferred this to sentry-javascript as this is not an issue with the bundler. The plugin was just filtered out. I added a PR to add this feature to RR.