From ebd15fd00143e90f97cadc426c77dce16d373a07 Mon Sep 17 00:00:00 2001
From: Carlos Nogueira <carlos.nogueira@datadoghq.com>
Date: Tue, 28 Apr 2026 15:38:30 +0100
Subject: [PATCH] Skip Babel and Metro plugins for web platform builds

- Babel plugin: skip all transforms when caller platform is 'web'
- Metro serializer (withDatadogMetroConfig): skip debug ID injection for
web
- Metro serializer (Expo plugin): skip debug ID injection for web
---
 .../core/src/metro/__tests__/metro.test.ts    | 13 ++++++++
 .../core/src/metro/plugin/metroSerializer.ts  | 14 ++++++--
 .../react-native-babel-plugin/src/index.ts    |  8 +++++
 .../test/plugin.test.ts                       | 32 +++++++++++++++++++
 4 files changed, 64 insertions(+), 3 deletions(-)

diff --git a/packages/core/src/metro/__tests__/metro.test.ts b/packages/core/src/metro/__tests__/metro.test.ts
index 98ebafae5..07b538d55 100644
--- a/packages/core/src/metro/__tests__/metro.test.ts
+++ b/packages/core/src/metro/__tests__/metro.test.ts
@@ -32,6 +32,19 @@ describe('Datadog Metro Plugin', () => {
     });
 
     describe('Datadog Metro Serializer', () => {
+        test('skips debug ID injection for web platform builds', async () => {
+            const serializer = createDatadogMetroSerializer();
+            const args = mockSerializerArgsForEmptyModule();
+            // Set platform to 'web'
+            (args[2] as any).transformOptions.platform = 'web';
+
+            const bundle = await serializer(...args);
+            const { code } = await convertSerializerOutput(bundle);
+            // Web builds should not contain debug ID injection
+            expect(code).not.toContain('debugId');
+            expect(code).not.toContain('_datadogDebugIds');
+        });
+
         test('generates bundle and source map with UUID v5 Debug ID', async () => {
             const codeSnippetHash = createHash('md5');
             codeSnippetHash.update(DEBUG_ID_CODE_SNIPPET);
diff --git a/packages/core/src/metro/plugin/metroSerializer.ts b/packages/core/src/metro/plugin/metroSerializer.ts
index 6a2d30791..e47ccfd11 100644
--- a/packages/core/src/metro/plugin/metroSerializer.ts
+++ b/packages/core/src/metro/plugin/metroSerializer.ts
@@ -45,8 +45,11 @@ export const createDatadogMetroSerializer = (
 ): DatadogMetroSerializer => {
     const serializer = customSerializer || createDefaultMetroSerializer();
     return async (entryPoint, preModules, graph, options) => {
-        // Skip for hot reload mode
-        if ((graph.transformOptions as any).hot) {
+        // Skip for hot reload mode and web builds
+        if (
+            (graph.transformOptions as any).hot ||
+            graph.transformOptions.platform === 'web'
+        ) {
             return serializer(entryPoint, preModules, graph, options);
         }
 
@@ -158,6 +161,7 @@ export const createDatadogBundleCallback = (
  * Adds Debug ID module for runtime injection, used for Expo.
  */
 export function unstable_beforeAssetSerializationPlugin({
+    graph,
     premodules,
     debugId
 }: {
@@ -165,7 +169,11 @@ export function unstable_beforeAssetSerializationPlugin({
     premodules: Module[];
     debugId?: string;
 }): Module[] {
-    if (!debugId || checkIfDebugIdModuleExists(premodules)) {
+    if (
+        graph.transformOptions.platform === 'web' ||
+        !debugId ||
+        checkIfDebugIdModuleExists(premodules)
+    ) {
         return premodules;
     }
     return [...addDebugIdModule(premodules, createDebugIdModule(debugId))];
diff --git a/packages/react-native-babel-plugin/src/index.ts b/packages/react-native-babel-plugin/src/index.ts
index d9be0d57b..6c41836c5 100644
--- a/packages/react-native-babel-plugin/src/index.ts
+++ b/packages/react-native-babel-plugin/src/index.ts
@@ -68,6 +68,14 @@ export default declare(
                 Program: {
                     enter(path, state) {
                         const pluginState: PluginPassState = state;
+
+                        // Skip all transforms for web builds
+                        const platform = (state.file?.opts?.caller as any)
+                            ?.platform;
+                        if (platform === 'web') {
+                            return;
+                        }
+
                         const { path: p, name } = getFileInfo(this);
 
                         if (p?.includes('node_modules')) {
diff --git a/packages/react-native-babel-plugin/test/plugin.test.ts b/packages/react-native-babel-plugin/test/plugin.test.ts
index cc579842f..4f496d142 100644
--- a/packages/react-native-babel-plugin/test/plugin.test.ts
+++ b/packages/react-native-babel-plugin/test/plugin.test.ts
@@ -51,6 +51,38 @@ describe('Babel plugin: initialization', () => {
     });
 });
 
+describe('Babel plugin: web platform', () => {
+    it('should skip all transforms for web platform builds', () => {
+        const input = `
+            import { Button } from 'react-native';
+            <Button color="red" onPress={func} />
+        `;
+        const output = transform(input, {
+            filename: 'file.tsx',
+            presets: ['@babel/preset-react', '@babel/preset-typescript'],
+            plugins: [
+                [
+                    plugin,
+                    {
+                        components: {
+                            useContent: true,
+                            useNamePrefix: true,
+                            tracked: []
+                        },
+                        sessionReplay: { svgTracking: false }
+                    }
+                ]
+            ],
+            configFile: false,
+            caller: { name: 'metro', platform: 'web' }
+        })?.code;
+        // Should not inject Datadog imports or wrappers
+        expect(output).not.toContain('DdBabelInteractionTracking');
+        expect(output).not.toContain('__DD_RN_BABEL_PLUGIN_ENABLED__');
+        expect(output).not.toContain('@datadog/mobile-react-native');
+    });
+});
+
 describe('Babel plugin: wrap interaction handlers for RUM', () => {
     it('should not wrap unsupported property (onClick) on supported element (Button)', () => {
         const input = `