Configure Multiple Transformers/resolvers Using Metro

I'm trying to add multiple resolvers and transformers using metro for my react native project, how do I combine them in my metro.config.js file? Background: I want to get both a sa

Solution 1:

I solved it by creating a custom transformer as follows:

customTransformer.js :

// For React Native version 0.59 or later
var upstreamTransformer = require("metro-react-native-babel-transformer");
var sassTransformer = require("react-native-sass-transformer");
var svgTransformer = require("react-native-svg-transformer");

module.exports.transform = function({ src, filename, options }) {
  if (filename.endsWith(".scss") || filename.endsWith(".sass")) {
    return sassTransformer.transform({ src, filename, options });
  } else if (filename.endsWith(".svg")) {
    return svgTransformer.transform({ src, filename, options });
  }  else {
    return upstreamTransformer.transform({ src, filename, options });
  }
};

And in my metro.config.js:

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

module.exports = (async () => {
  const {
    resolver: { sourceExts, assetExts }
  } = await getDefaultConfig();
  return {
    transformer: {
      babelTransformerPath: require.resolve("./customTransformer.js")
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg" && ext!=="scss"),
      sourceExts: [...sourceExts, "svg", "scss", "sass"]
    }
  };
})();

No idea if this is the best way, but it seems to work

Solution 2:

Try this one:

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

const config1 = {};
const config2 = {};

module.exports = mergeConfig(config1, config2);