How can I configure the metro.config.js of a monorepo containing multiple apps (in <root>/apps/) and packages (in <root>/packages/) to work for all apps in the monorepo? Each app has its own yarn workspace defined in the root package.json.
My current metro.config.js is:
const path = require("path");
const {getDefaultConfig} = require("metro-config");
module.exports = (async () => {
const {
resolver: {sourceExts, assetExts},
} = await getDefaultConfig(__dirname);
return {
projectRoot: path.resolve(__dirname),
watchFolders: [path.resolve(__dirname)],
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"]
},
};
})();
However, this setup seems to not load the node_modules packages of the apps (<root>/apps/<app-name>/node_modules), giving me an seemingly unrelated error (but after I move the config to the app folder, the app runs - but does not work, because it uses react-native-svg-transformer, which forces me to have metro.config.js in the monorepo root, otherwise it does not work).