React native Question posted in
The official React Native documentation can be found here.

React native – How to use Dynatrace with Expo SDK 50/51?

I had Dynatrace properly integrated with Expo SDK 49. I did the upgrade to SDK 50 and then SDK 51 now and get the following error on my development client build (The preview and production channels seem to work fine.):

Unable to resolve "@dynatrace/react-native-plugin/jsx-dev-runtime" from "App.tsx"

I think the reason is that babel decides based on the environment if it uses jsx-runtime or jsx-dev-runtime. It seems that @dynatrace/react-native-plugin doesn’t ships with jsx-dev-runtime.

Anyone got this working?

Versions I use:

"expo": "^51.0.0",
"@dynatrace/react-native-plugin": "^2.295.1",
"@babel/core": "^7.25.2",
"@babel/parser": "^7.25.3",
"@babel/preset-env": "^7.25.3",
"babel-preset-expo": "~11.0.0",
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    This was fixed in the newest version of the dynatrace react-natvie-plugin:

    "@dynatrace/react-native-plugin": "^2.297.2"

  2. 0

    I am trying to install Dynatrace with Expo SDK 50.0.19. I am using EAS. Can you share what you did during the installation and how you proceeded?

    In my metro.config.js file, ‘react-native-svg-transformer’ is currently used. How did you add dynatrace babelTransformerPath and reporter?

    My metro.config.js file is as follows.

    const {getDefaultConfig} = require('expo/metro-config');

module.exports = (() => {
  const config = getDefaultConfig(__dirname, {
    isCSSEnabled: true,
  });

  const {transformer, resolver} = config;

  config.transformer = {
    ...transformer,
    babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer'),
    babelTransformerPath: require.resolve('react-native-svg-transformer'),
  };
  config.resolver = {
    ...resolver,
    assetExts: resolver.assetExts.filter(ext => ext !== 'svg'),
    sourceExts: [...resolver.sourceExts, 'svg'],
  };
  config.reporter = require('@dynatrace/react-native-plugin/lib/dynatrace-reporter');

  return config;
})();

    My preset settings in my babel.config.js file are as follows.

    module.exports = function (api) {
  api.cache(true);
  return {
    presets: [
      [
        'babel-preset-expo',
        {
          jsxImportSource: '@dynatrace/react-native-plugin',
        },
      ],
    ],
    plugins: [
      [
        require.resolve('babel-plugin-module-resolver'),
        {
          root: ['./'],
          extensions: ['.ios.js', '.android.js', '.ts', '.tsx', '.jsx', '.js', '.svg'],
        },
      ],
    ],
  };
};

    My app/_layout.tsx file is as follows.

    import {Dynatrace, DataCollectionLevel, UserPrivacyOptions} from '@dynatrace/react-native-plugin';

const RootLayout = () => {

let privacyConfig = new UserPrivacyOptions(DataCollectionLevel.UserBehavior, true);
Dynatrace.applyUserPrivacyOptions(privacyConfig);

return (
<View/>
)
}

    The error I get with ‘npm run dev’ is as follows.

    error-image

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search