Trouble integrating react-native-svg-transformer with my metro.config.js file

Question

I want to use svgs in my react native app. After a bit of searching, it seemed like react-native-svg-transformer was a good option. However, I got to the step where I was supposed to merge the github metro.config.js with my local metro.config.js, and I realized that my config file looks very different. I couldn't figure out how to merge them and I don't want to break anything, so any input would be much appreciated. Here is the react-native-svg-transform code:

const { getDefaultConfig } = require("metro-config");

module.exports = (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.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"]
    }
  };
})();

And here is my metro.config.js:

"use strict";
function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}

const path = require("path");

const ROOT_PATH = path.resolve(__dirname, "basic_bundle");

module.exports = {
  cacheStores: [],
  maxWorkers: 1,
  projectRoot: ROOT_PATH,
  reporter: { update() {} },
  watchFolders: [path.resolve(__dirname, "../lib/polyfills")],
  server: { port: 10028 },
  resolver: {
    useWatchman: false
  },

  transformer: {
    assetRegistryPath: path.join(ROOT_PATH, "AssetRegistry"),
    babelTransformerPath: require.resolve("metro/src/reactNativeTransformer"),
    enableBabelRCLookup: false,
    enableBabelRuntime: false,
    getTransformOptions: (() => {
      var _ref = _asyncToGenerator(function*() {
        return {
          transform: { experimentalImportSupport: true, inlineRequires: false },
          preloadedModules: false,
          ramGroups: []
        };
      });
      return function getTransformOptions() {
        return _ref.apply(this, arguments);
      };
    })()
  }
};

If anyone knows an easier way to do this, that would also be welcome. Additionally, I know that react-native-svg-uri has production issues on android, and I would really like to avoid those - does anyone know if react-native-svg-transform has the same issues? Thanks!

Answer 1

Metro's documentation sucks but I figured it out in my project. I used the mergeConfig function.

Your file should look like this:

"use strict";
const { getDefaultConfig, mergeConfig } = require("metro-config");

function _asyncToGenerator(fn) {
  return function() {
    var gen = fn.apply(this, arguments);
    return new Promise(function(resolve, reject) {
      function step(key, arg) {
        try {
          var info = gen[key](arg);
          var value = info.value;
        } catch (error) {
          reject(error);
          return;
        }
        if (info.done) {
          resolve(value);
        } else {
          return Promise.resolve(value).then(
            function(value) {
              step("next", value);
            },
            function(err) {
              step("throw", err);
            }
          );
        }
      }
      return step("next");
    });
  };
}

const path = require("path");

const ROOT_PATH = path.resolve(__dirname, "basic_bundle");

const configA = {
  cacheStores: [],
  maxWorkers: 1,
  projectRoot: ROOT_PATH,
  reporter: { update() {} },
  watchFolders: [path.resolve(__dirname, "../lib/polyfills")],
  server: { port: 10028 },
  resolver: {
    useWatchman: false
  },

  transformer: {
    assetRegistryPath: path.join(ROOT_PATH, "AssetRegistry"),
    babelTransformerPath: require.resolve("metro/src/reactNativeTransformer"),
    enableBabelRCLookup: false,
    enableBabelRuntime: false,
    getTransformOptions: (() => {
      var _ref = _asyncToGenerator(function*() {
        return {
          transform: { experimentalImportSupport: true, inlineRequires: false },
          preloadedModules: false,
          ramGroups: []
        };
      });
      return function getTransformOptions() {
        return _ref.apply(this, arguments);
      };
    })()
  }
};

const configB = (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.filter(ext => ext !== "svg"),
        sourceExts: [...sourceExts, "svg"]
      }
    };
  })();

  module.exports = mergeConfig(configA, configB);

I hope this helps. Good luck