[BUG] On upgrading to Expo 40 (from 38): "Unrecognized font family"

[SamMakesThings]

🐛 Bug Report

Summary of Issue

After upgrading to Expo 40 (from 38 in my case), fonts & icons fail to load.

Environment - output of expo diagnostics & the platform(s) you're targeting

Expo CLI 4.0.13 environment info:
System:
OS: Linux 5.4 Ubuntu 20.04.1 LTS (Focal Fossa) (reproduced on OSX)
Shell: 5.8 - /usr/bin/zsh
Binaries:
Node: 14.7.0 - ~/.nvm/versions/node/v14.7.0/bin/node
Yarn: 1.22.4 - /usr/bin/yarn
npm: 6.14.7 - ~/.nvm/versions/node/v14.7.0/bin/npm
npmPackages:
expo: ^40.0.0 => 40.0.0
react: 16.13.1 => 16.13.1
react-native: https://github.com/expo/react-native/archive/sdk-40.0.0.tar.gz => 0.63.2
npmGlobalPackages:
expo-cli: 4.0.13
Expo Workflow: managed

Occurs on both iOS and Android.

Reproducible Demo

Not a Snack, but I did tear down the app so it's a single screen with a single text element reproducing the issue. Seen here: https://github.com/StartupSam/diagnose-expo-font-loading

This repo produced the bug on two different machines, on two different phones, each. Just yarn and expo start as you normally would.

Expected Behavior vs Actual Behavior

Expected behavior is the fonts & icons load as they did in Expo 38. With this upgrade to Expo 40, they don't. Android does so silently, while iOS throws an error that says "Unrecognized font family: 'FONTFAMILYNAME'". As far as I can tell, expo-font library is silently failing.

A list of the solutions I've tried so far:

• Clearing node_modules, .expo, yarn.lock, npm cache, yarn cache (clean), reinstalling mobile apps
• expo install expo-font
• expo upgrade (not to upgrade, but to make sure packages are correct versions)
• The sourceExts solution here: Unrecognized font family on SDK37 #7565
• The postinstall removal script here: https://forums.expo.io/t/sdk-37-unrecognized-font-family/35201/3
• Removing all unused dependencies in case something is causing a conflict
• Making sure that I'm indeed calling Font.loadAsync from AppLoading (I am, though console logs have inexpicably stopped showing up as well. Had to change things to console.errors to see anything)
• Replacing Font.loadAsync with the hook useFonts
• Upgrading all the non-expo-managed packages that had options available

Hopefully I didn't miss anything. Any help is greatly appreciated. :)

[AdamJNavarro]

Hey @StartupSam, thanks for providing such a detailed bug report! It's always appreciated when we get a report where the person has taken their time to investigate the issue. Two questions for you:

1. Have you tried just loading the custom fonts you have without the Ionicons.font set or vice versa?

2. Have you tried using a different custom font than the prior ones to see if the error still occurs?

Cheers,
Adam

[SamMakesThings]

Hey @AdamJNavarro ! Yes and yes. Resulted in the same issue for whichever thing wasn't commented out, as far as I could tell. Also tried switching out Rubik for Inter (from the Expo docs) with no luck. Of course, I may have failed to clear some cache or something that made the issue persist, so it's still possible one of those would change something. I doubt it though

[brentvatne]

from https://github.com/StartupSam/diagnose-expo-font-loading/blob/master/metro.config.js

you should use @expo/metro-config instead, see: https://docs.expo.io/guides/customizing-metro/

[SamMakesThings]

Thanks @brentvatne - to clarify, you're saying I should add @expo/metro-config as a dependency in the project? (or as a dev dependency? It doesn't say on this page)

[brentvatne]

either one, it doesn't matter. dev dependencies don't make much sense in most react-native projects because only code that you import in your app is included in the bundle anyways, and you're never going to do npm install --production because your app doesn't run on a server.

[SamMakesThings]

That did it! Had to change my metro.config.js file though, both the old file and the blank template caused errors.

Greatly appreciate the help @brentvatne @AdamJNavarro, a day of debugging would've been multiple days without your responses.

For future bug-killers, here are the steps I took to fix:

1. Install @expo/metro-config. yarn add @expo/metro-config
2. If you have a metro.config.js, make sure it's formatted correctly per the expo specifications found at https://docs.expo.io/guides/customizing-metro/. See my config file below for an example.
3. Yarn it up one more time with yarn
4. Start Expo with a cache clear. expo start -c

The config file I ended up with:

const defaultConfig = getDefaultConfig(__dirname);

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  },
  resolver: {
    assetExts: [
      ...defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg')
    ],
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
  }
};

Looks like many different things can cause this problem, so items from my attempted solution list above may also help.

[brentvatne]

thanks for the followup @StartupSam.

i went ahead and updated our release notes in case other developers are also using the metro-config package to generate the default config.

[andresarcila]

@StartupSam thank you for sharing. works for me.

[tuchidoghostmaster]

That did it! Had to change my metro.config.js file though, both the old file and the blank template caused errors.

Greatly appreciate the help @brentvatne @AdamJNavarro, a day of debugging would've been multiple days without your responses.

For future bug-killers, here are the steps I took to fix:

1. Install @expo/metro-config. yarn add @expo/metro-config
2. If you have a metro.config.js, make sure it's formatted correctly per the expo specifications found at https://docs.expo.io/guides/customizing-metro/. See my config file below for an example.
3. Yarn it up one more time with yarn
4. Start Expo with a cache clear. expo start -c

The config file I ended up with:

const defaultConfig = getDefaultConfig(__dirname);

module.exports = {
  transformer: {
    babelTransformerPath: require.resolve('react-native-svg-transformer')
  },
  resolver: {
    assetExts: [
      ...defaultConfig.resolver.assetExts.filter((ext) => ext !== 'svg')
    ],
    sourceExts: [...defaultConfig.resolver.sourceExts, 'svg']
  }
};

Looks like many different things can cause this problem, so items from my attempted solution list above may also help.

Very good!

it is worked for me.

Thank you.

[palmieriang]

I had the same issue when upgraded to Expo 40.

My problem was react-native-svg-transformer

When using SVG elements, make sure to follow the Expo docs instead of react-native-svg-transformer

It worked for me.

[litinskii]

same problem on Expo Workflow: bare

[brentvatne]

@litinskii - create an issue and fill in the template