Unrecognized font family 'material-community' Expo 40

[mosleyjr]

1. SDK Version: 4.1.6
2. Platforms(Android/iOS/web/all): All

I recently updated the cli to 4.1.6 and expo to 40, most recent react native. I’m getting the error
unrecognized font family 'material-community'.

The app runs and the errors can be dismissed but the icons do not load. The icons are imported from @expo/vector-icons

• I have attempted to update my metro.config.js file according to - https://github.com/expo/expo/issues/11333 with no effect.
• The @expo/vector-icon files are all where they should be
• I use the following to clear it all out when I try something
  rm -rf node_modules && npm cache clean --force && rm -rf .expo && rm yarn.lock && yarn
  and expo start -c

Any idea what might be keeping the vector icon fonts from loading?

ps: I am attempting to replicate via a snack, but with no luck yet

[notbrent]

make sure if you have a custom metro.config.js that you are following these instructions: Customizing Metro - Expo Documentation

[mosleyjr]

So this is where things are a little odd. I have an existing metro.config that I use for react-native-sass-transformer. I tried adding the svg transformer and using @expo/metro-config, but using @expo/metro-config in place of ‘metro-config’ breaks the build

If I use require(‘metro-config’) instead the build works but there’s no change in the error. Do I really need to all of a sudden use “react-native-svg-transformer” for @expo/vector-icons to work? Why wouldn’t I have needed that before? I also thought the metro-config transformer wasn’t necessary for those components, only custom fonts or other packages.

This is the combined metro transformer I used to have “svg” and “sass”. - javascript - Configure multiple transformers/resolvers using metro - Stack Overflow

[mosleyjr]

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:

1. Add react-native-svg-transformer. For me this was yarn add react-native-svg-transformer -d
2. Add @expo/metro-config
3. Add custom-transformer.js file example from this stack overflow response
4. 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 });
  }
};