Config not working in monorepo containing multiple apps

bkeph commented 2 years ago

I have a monorepo containing multiple apps managed through yarn workspaces, each with it's own metro.config.js file.

module.exports = (async () => {
  const {
    resolver: {sourceExts, assetExts},
  } = await getDefaultConfig();
  return {
    projectRoot: path.resolve(__dirname, "../../"),
    watchFolders: [path.resolve(__dirname, "../../")],
    transformer: {
      getTransformOptions: async () => ({
        transform: {
          experimentalImportSupport: false,
          inlineRequires: false,
        },
      }),
      babelTransformerPath: require.resolve(
        "./react-native-svg-transformer.js",
      ),
    },
    resolver: {
      assetExts: assetExts.filter(ext => ext !== "svg"),
      sourceExts: [...sourceExts, "svg"],
    },
  };
})();

If I make the modifications above to the metro.config.js, I get the error:

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: number.

But if I move the metro.config.js to the root folder, it works properly. However, I cannot move it into the root folder, because each app has a different metro configuration.

Why doesn't it work if the config is in the specific app folder, and how should I adapt the config in order to make it work?

// react-native-svg-transformer.js
const svgTransformer = require("react-native-svg-transformer");
const upstreamTransformer = require("metro-babel-transformer");

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