Metro bundling fails with React.lazy / dynamic imports when using `withDatadogMetroConfig`

[seungminsa]

Describe the bug

Title

Metro bundling fails with React.lazy / dynamic imports when using withDatadogMetroConfig

Description

Hi Datadog team,

We’re seeing a Metro bundling error when using withDatadogMetroConfig together with React.lazy(() => import(...)) in a React Native app.

The app starts normally, but when navigating to a lazily-loaded screen, Metro tries to bundle that screen separately and the Datadog Metro plugin throws a Debug ID error.

Error

BUNDLE  src/screens/SomeScreen.tsx

ERROR  Error: [DATADOG METRO PLUGIN] Debug ID was not found in the bundle. Call `options.datadogBundleCallback` if you are using a custom serializer.
    at node_modules/@datadog/mobile-react-native/lib/commonjs/metro/plugin/metroSerializer.js:60:13
    at async build (node_modules/metro/src/Server.js:903:22)
    at async Server.requestProcessor [as _processBundleRequest] (node_modules/metro/src/Server.js:760:18)
    at async Server._processRequest (node_modules/metro/src/Server.js:518:7)

Environment

@datadog/mobile-react-native: 2.14.7
React Native: 0.85.2
Metro: 0.84.4

Usage

const { withDatadogMetroConfig } = require("@datadog/mobile-react-native/metro");

module.exports = withDatadogMetroConfig(config);

const LazyScreen = React.lazy(() => import("./SomeScreen"));

Workaround

Disabling Debug ID injection while running the Metro dev server avoids the issue:

const isMetroDevServer = process.argv.some(
  (arg) => arg === "start" || arg.endsWith("/start"),
);

module.exports = withDatadogMetroConfig({
  ...config,
  useDebugId: !isMetroDevServer,
});

Expected

Lazy-loaded screens should bundle successfully when using withDatadogMetroConfig.

Actual

Metro fails when bundling the lazy-loaded screen with:

[DATADOG METRO PLUGIN] Debug ID was not found in the bundle.

Reproduction steps

const { withDatadogMetroConfig } = require("@datadog/mobile-react-native/metro");

module.exports = withDatadogMetroConfig(config);

const LazyScreen = React.lazy(() => import("./SomeScreen"));

SDK logs

BUNDLE  src/screens/SomeScreen.tsx

ERROR  Error: [DATADOG METRO PLUGIN] Debug ID was not found in the bundle. Call `options.datadogBundleCallback` if you are using a custom serializer.
    at node_modules/@datadog/mobile-react-native/lib/commonjs/metro/plugin/metroSerializer.js:60:13
    at async build (node_modules/metro/src/Server.js:903:22)
    at async Server.requestProcessor [as _processBundleRequest] (node_modules/metro/src/Server.js:760:18)
    at async Server._processRequest (node_modules/metro/src/Server.js:518:7)

Expected behavior

No response

Affected SDK versions

2.14.7

Latest working SDK version

unknown

Did you confirm if the latest SDK version fixes the bug?

Yes

Integration Methods

Yarn

React Native Version

0.85.2

Package.json Contents

No response

iOS Setup

No response

Android Setup

No response

Device Information

ios 18.x

Other relevant information

No response

[sbarrio]

Hi @seungminsa, thanks for reaching out.

We'll prepare a fix for this (both on v2 and v3) and will try to release it as soon as possible.

Thanks!

[saseungmin]

@sbarrio

Thanks for looking into this so quickly! I’ll wait for the fix in a future release.