A Question for React (JavaScript library) React.js : metro config with multiple babelTransformerPath

user_16638636 0
Viewed 295

I use SVG files in my react-native app and works fine with react-native-svg-transformer. But now I need to implement dynatrace, I try to use mergeConfig on the metro config file, but, the svg stops working if I use the two configurations.

This is my metro config file. All help will be welcome.

const { getDefaultConfig, mergeConfig } = require('metro-config');

const configSvg = (async () => {
    const {
        resolver: { sourceExts, assetExts },
    } = await getDefaultConfig();
    return {
        transformer: {
            getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
            babelTransformerPath: require.resolve(
                'react-native-svg-transformer',
            ),
        },
        resolver: {
            assetExts: [...assetExts, 'palpkg'].filter(ext => ext !== 'svg'),
            sourceExts: [...sourceExts, 'svg', 'palpkg'],
        },
    };
})();

const configDynatrace = {
    transformer: {
        babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
    },
    reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter")
};

module.exports = mergeConfig(configDynatrace, configSvg);
metro-bundler react-native reactjs facebook-javascript-sdk javascript
1 Answers

Seems you cannot merge them like the above - it breaks SVG support otherwise.

You need to do the following:

dynatrace.config.js

react: {
    upstreamTransformer: 'react-native-svg-transformer',
}

metro.config

const configDynatrace = (async () => {
  const {
    resolver: { sourceExts, assetExts },
  } = await getDefaultConfig()
  return {
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve('@dynatrace/react-native-plugin/lib/dynatrace-transformer')
    },
    reporter: require("@dynatrace/react-native-plugin/lib/dynatrace-reporter"),
    resolver: {
      assetExts: assetExts.filter(ext => ext !== 'svg'),
      sourceExts: [...sourceExts, 'svg'],
    },
  }
})();

module.exports = configDynatrace

user_61729480
Related