Ok, so came up with a solution. The problem stemmed from needing to have multiple transformers and how that interacts with the new way to handle metro with Expo v40.
If you don’t have multiple transformers you can skip that part of the solution and just rely on the github response.
Solution:
- Add
react-native-svg-transformer. For me this was yarn add react-native-svg-transformer -d
- Add
@expo/metro-config
- Add
custom-transformer.js file example from this stack overflow response
- Update
metro.config.js according to this github comment, except use the new transformer in place of the babelTransformPath (refer back to stackoverflow for this).
The reason my attempts weren’t working was because I was using this from Stackoverflow:
const {
resolver: { sourceExts, assetExts }
} = await getDefaultConfig();
instead of…
const defaultConfig = getDefaultConfig(__dirname);
My final metro.config.js looks like this:
const { getDefaultConfig } = require("@expo/metro-config");
const defaultConfig = getDefaultConfig(__dirname);
module.exports = (async () => {
return {
transformer: {
babelTransformerPath: require.resolve("./custom-transformer.js")
},
resolver: {
assetExts: [...defaultConfig.resolver.assetExts.filter(ext => ext !== "svg" && ext!=="scss")],
sourceExts: [...defaultConfig.resolver.sourceExts, "svg", "scss", "sass"]
}
};
})();
With custom-transformer.js like this:
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 });
}
};
