error: invalid expression (possible JSX: pass -parse-jsx to parse)

[ddeschenes-gaiia]

Describe the bug

Using latest SDK version (3.0.0) with @datadog/mobile-react-native-babel-plugin does seem to work.

Followed the Migration guide and Babel Setup.

When releasing and building Android, build fails with error :

> Task :app:createBundleReleaseJsAndAssets
/home/expo/workingdir/build/android/app/build/generated/assets/createBundleReleaseJsAndAssets/index.android.bundle:193619:65: error: invalid expression (possible JSX: pass -parse-jsx to parse)
          return (0, _datadogMobileReactNative.__ddExtractText)(<>
                                                                ^
> Task :app:createBundleReleaseJsAndAssets FAILED

Same for ios:

Build failed: The "Run fastlane" step failed because of an error in the Xcode build process. We automatically detected following errors in your Xcode build logs:
- error)
- \(error)")
- \(error)")
- error)
- error)
- instead
- instead
- error)
- \(error) setting dummy value")
- \(error) setting dummy value")
- \(error) setting dummy value")
- \(error) setting dummy value")
- \(error) setting dummy value")
- invalid expression (possible JSX: pass -parse-jsx to parse)
Refer to "Xcode Logs" below for additional, more detailed logs.

I am using babel preset babel-preset-expo.

Removing @datadog/mobile-react-native-babel-plugin from babel plugins configuration works.

Reproduction steps

• Upgrade all @datadog to version 3.0.0 (@datadog/mobile-react-native, @datadog/mobile-react-native-babel-plugin, @datadog/mobile-react-native-session-replay, @datadog/mobile-react-native-webview)
• Add babel plugin as described in the Setup Guide
• Build android or ios

SDK logs

No response

Expected behavior

Should build successfully

Affected SDK versions

3.0.0

Latest working SDK version

2.13.2

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

No

Integration Methods

Yarn

React Native Version

0.81.5

Package.json Contents

"dependencies": {
"@apollo/client": "3.10.5",
"@datadog/datadog-ci": "5.4.0",
"@datadog/mobile-react-native": "3.0.0",
"@datadog/mobile-react-native-babel-plugin": "3.0.0",
"@datadog/mobile-react-native-session-replay": "3.0.0",
"@datadog/mobile-react-native-webview": "3.0.0",
"@expo-google-fonts/inter": "0.2.3",
"@expo/vector-icons": "^15.0.3",
"@launchdarkly/react-native-client-sdk": "10.11.0",
"@react-native-async-storage/async-storage": "2.2.0",
"@react-native-community/netinfo": "11.4.1",
"@react-navigation/drawer": "^7.5.0",
"@rn-primitives/portal": "1.3.0",
"@rn-primitives/tooltip": "1.2.0",
"@rnmapbox/maps": "10.2.10",
"@shopify/flash-list": "2.0.2",
"@stytch/react-native": "0.67.0",
"@stytch/react-native-inappbrowser-reborn": "3.7.2",
"apollo-link-timeout": "4.0.0",
"apollo3-cache-persist": "0.15.0",
"babel-plugin-module-resolver": "5.0.2",
"class-variance-authority": "0.7.1",
"clsx": "2.1.1",
"dayjs": "1.11.13",
"eas-build-cache-provider": "16.4.2",
"expo": "~54.0.25",
"expo-build-properties": "~1.0.10",
"expo-camera": "~17.0.10",
"expo-constants": "~18.0.13",
"expo-datadog": "54.0.0",
"expo-dev-client": "~6.0.20",
"expo-font": "~14.0.10",
"expo-image": "~3.0.11",
"expo-linear-gradient": "~15.0.8",
"expo-linking": "~8.0.11",
"expo-location": "~19.0.8",
"expo-media-library": "~18.2.1",
"expo-router": "~6.0.21",
"expo-secure-store": "~15.0.8",
"expo-splash-screen": "~31.0.13",
"expo-status-bar": "~3.0.9",
"expo-system-ui": "~6.0.9",
"expo-task-manager": "~14.0.9",
"expo-updates": "~29.0.16",
"expo-web-browser": "~15.0.10",
"fs-extra": "11.2.0",
"graphql": "16.10.0",
"i18next": "23.11.5",
"lodash.debounce": "4.0.8",
"lodash.throttle": "4.1.1",
"nativewind": "5.0.0-preview.2",
"patch-package": "8.0.1",
"react": "19.1.0",
"react-dom": "19.1.0",
"react-i18next": "14.1.2",
"react-native": "0.81.5",
"react-native-css": "3.0.1",
"react-native-email-link": "1.15.0",
"react-native-gesture-handler": "~2.28.0",
"react-native-mmkv": "4.1.0",
"react-native-nitro-bg-timer": "0.1.0",
"react-native-nitro-modules": "0.31.10",
"react-native-reanimated": "~4.1.1",
"react-native-safe-area-context": "~5.6.0",
"react-native-screens": "~4.16.0",
"react-native-svg": "15.12.1",
"react-native-uuid": "2.0.2",
"react-native-web": "^0.21.0",
"react-native-webview": "13.16.0",
"react-native-worklets": "0.5.1",
"short-uuid": "5.2.0",
"sp-react-native-in-app-updates": "1.5.0",
"styled-components": "6.1.19",
"tailwind-merge": "3.3.1",
"tailwindcss-animate": "1.0.7",
"tsx": "4.20.6"
},
"devDependencies": {
"@babel/core": "^7.25.2",
"@changesets/cli": "2.29.7",
"@graphql-codegen/add": "5.0.0",
"@graphql-codegen/cli": "5.0.0",
"@graphql-codegen/fragment-matcher": "3.3.3",
"@graphql-codegen/named-operations-object": "2.3.1",
"@graphql-codegen/typescript": "2.8.7",
"@graphql-codegen/typescript-generic-sdk": "2.3.11",
"@graphql-codegen/typescript-operations": "2.5.12",
"@graphql-codegen/typescript-react-apollo": "3.3.7",
"@parcel/watcher": "2.4.1",
"@tailwindcss/postcss": "4.1.16",
"@types/glob": "8.1.0",
"@types/lodash.debounce": "4.0.9",
"@types/lodash.throttle": "4.1.9",
"@types/react": "~19.1.10",
"@types/react-native-uuid": "2.0.0",
"@typescript-eslint/eslint-plugin": "6.21.0",
"@typescript-eslint/parser": "6.21.0",
"dotenv-cli": "6.0.0",
"eslint": "8.56.0",
"eslint-config-prettier": "8.5.0",
"eslint-config-universe": "^12.0.0",
"eslint-plugin-i18next": "6.0.3",
"eslint-plugin-import": "2.29.0",
"eslint-plugin-jest": "27.9.0",
"eslint-plugin-no-relative-import-paths": "1.4.0",
"eslint-plugin-prettier": "5.1.3",
"eslint-plugin-react": "7.29.4",
"eslint-plugin-react-hooks": "4.3.0",
"eslint-plugin-react-memo": "0.0.3",
"eslint-plugin-sort-exports": "0.6.0",
"eslint-plugin-typescript-sort-keys": "3.1.0",
"eslint-plugin-unicorn": "51.0.1",
"jest": "29.7.0",
"jest-expo": "~54.0.16",
"lint-staged": "15.5.2",
"postcss": "8.5.6",
"prettier": "3.2.5",
"prettier-plugin-tailwindcss": "0.7.1",
"tailwindcss": "4.1.16",
"ts-node": "10.9.2",
"typescript": "~5.9.2"
}

iOS Setup

No response

Android Setup

No response

Device Information

No response

Other relevant information

No response

[cdn34dd]

Hey @ddeschenes-gaiia , thanks for letting us know, we'll look into this soon. If you have any more info that could help speed up the process make sure to let us know.

Would it also be possible for you to share your babel.config.js and metro.config.js to see if we can reproduce this on our end ?

Also does the app run in development ?

[ddeschenes-gaiia]

@cdn34dd
Thanks for quick answer ! Sure, here is the configs:

Babel

module.exports = (api) => {
  api.cache(true);
  return {
    presets: [['babel-preset-expo']],
    plugins: [
      [
        'module-resolver',
        {
          root: ['.'],
          alias: {
            '@': './src'
          }
        }
      ],
      '@datadog/mobile-react-native-babel-plugin',
      'react-native-worklets/plugin'
    ]
  };
};

Metro

const { getDatadogExpoConfig } = require('@datadog/mobile-react-native/metro');
const { withNativewind } = require('nativewind/metro');

const config = getDatadogExpoConfig(__dirname);

module.exports = withNativewind(config);