[Font] Expo cannot load a font due to multiple versions of `expo-font` installed #5507

AamuLumi · 2019-08-30T16:21:21Z

🐛 Bug Report

Environment

  Expo CLI 3.0.10 environment info:
    System:
      OS: Linux 5.2 Solus 4.0
      Shell: 5.7.1 - /bin/zsh
    Binaries:
      Node: 10.16.3 - /usr/bin/node
      Yarn: 1.15.2 - ~/.yarn/bin/yarn
      npm: 6.1.0 - ~/.config/yarn/global/node_modules/.bin/npm
    npmPackages:
      expo: ^34.0.4 => 34.0.4 
      react: 16.8.3 => 16.8.3 
      react-native: https://github.com/expo/react-native/archive/sdk-34.0.1.tar.gz => 0.59.8 
      react-navigation: ^3.12.0 => 3.12.0 
    npmGlobalPackages:
      expo-cli: 3.0.10

I'm debugging an iOS app.

Steps to Reproduce

Add a font in an expo app with Font.loadAsync()
Use any glyph of this font

Expected Behavior

Expo must draw a glyph with the custom font.

Actual Behavior

fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.

Bug explanation

Currently, we need to import * as Font from "expo-font" in code and use Font.loadAsync(aCustomFont) to load the font. So we use a "expo-font" module from node_modules.

In expo, the withExpoRoot.tsx file import the Font.processFontFamily function to use custom fonts and draw glyphs of these fonts (see the code here).

But the expo module uses another expo-font module which is installed in the node_modules of the expo module.

In other way, expo works with 2 expo-font modules. But the problem is the module which is loading fonts in custom code (with Font.loadAsync) is different from the one in expo which is using fonts (with Font.processFontFamily).

Here's a screenshot from the node_modules folder in my text editor with the 2 expo-font modules :

I hope I've been clear in my explanation. And thanks for developing expo ! :)

The text was updated successfully, but these errors were encountered:

cruzach · 2019-08-30T20:58:49Z

Hi! Sorry you're running into this dependency mixup

What version expo-font are you using?

HackJack-101 · 2019-09-02T09:21:47Z

We are using expo-font v6.0.1

{
name: "ukit",
version: "3.5.0",
description: "Ukit",
author: "HackJack",
private: true,
main: "node_modules/expo/AppEntry.js",
dependencies: {
@expo/vector-icons: "^10.0.5",
axios: "^0.19.0",
expo: "^34.0.4",
expo-asset: "^6.0.0",
expo-constants: "^6.0.0",
expo-font: "^6.0.1",
jest-expo: "^34.0.0",
moment: "^2.22.2",
prop-types: "^15.6.2",
react: "16.8.3",
react-native: "https://github.com/expo/react-native/archive/sdk-34.0.1.tar.gz",
react-native-collapsible: "^1.0.0",
react-native-gesture-handler: "^1.2.2",
react-native-maps: "^0.24.2",
react-native-popup-dialog: "^0.15.0",
react-native-reanimated: "^1.0.0-alpha.11",
react-native-root-toast: "^3.0.1",
react-native-simple-store: "^1.3.0",
react-native-svg: "^9.4.0",
react-native-textinput-effects: "^0.4.0",
react-navigation: "^3.12.0",
react-redux: "^5.0.7",
redux: "^3.7.2",
redux-persist: "^5.10.0",
sentry-expo: "~1.13.0"
},
devDependencies: {
prettier: "^1.14.2"
}
}

cruzach · 2019-09-03T13:44:50Z

@Jack3113 can you try deleting node modules/reinstalling, and clearing cache with expo start -c?

The expo@34.0.4 package has expo-font@6.0.1 as a dependency (the same version you have installed in your project)

HackJack-101 · 2019-09-03T14:54:16Z

The problem is still here

hackjack$ rm -rf ./node_modules/

hackjack$ npm i
added 1372 packages from 649 contributors and audited 918449 packages in 85.43s
found 13 vulnerabilities (11 low, 2 high)
  run `npm audit fix` to fix them, or `npm audit` for details

hackjack$ expo start -c
Starting project at /Users/hackjack/WebstormProjects/edtBordeaux
Expo DevTools is running at http://localhost:19002
Opening DevTools in the browser... (press shift-d to disable)
Starting Metro Bundler on port 19008.
Your JavaScript transform cache is empty, rebuilding (this may take a minute).
Tunnel ready.

  exp://192.168.1.32:19000

Trying to open the project in iOS simulator...
Opening iOS simulator
Opening exp://127.0.0.1:19000 in iOS simulator

Press ? to show a list of all available commands.
Finished building JavaScript bundle in 27056ms.
Running application on iPhone 8 Plus.

fontFamily "FontAwesome" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.
- node_modules/expo/build/environment/muteWarnings.fx.js:26:24 in error
- node_modules/expo/node_modules/expo-font/build/Font.js:35:16 in processFontFamily
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3545:38 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3419:6 in addNestedProperty
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3556:8 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4003:29 in createInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14437:12 in completeWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* App.js:40:50 in onFinish
- node_modules/expo/build/launch/AppLoading.js:31:20 in _callee$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- ... 14 more stack frames from framework internals

fontFamily "material-community" is not a system font and has not been loaded through Font.loadAsync.

- If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

- If this is a custom font, be sure to load it with Font.loadAsync.
- node_modules/expo/build/environment/muteWarnings.fx.js:26:24 in error
- node_modules/expo/node_modules/expo-font/build/Font.js:35:16 in processFontFamily
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3545:38 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3419:6 in addNestedProperty
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:3556:8 in diffProperties
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:4003:29 in createInstance
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:14437:12 in completeWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17094:10 in completeUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17304:30 in performUnitOfWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17316:41 in workLoop
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17417:15 in renderRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18423:17 in performWorkOnRoot
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18324:24 in performWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18285:14 in performSyncWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:18169:19 in requestWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:17969:16 in scheduleWork
- node_modules/react-native/Libraries/Renderer/oss/ReactNativeRenderer-dev.js:6934:17 in enqueueSetState
- node_modules/react/cjs/react.development.js:335:31 in setState
* App.js:40:50 in onFinish
- node_modules/expo/build/launch/AppLoading.js:31:20 in _callee$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- ... 14 more stack frames from framework internals

HackJack-101 · 2019-09-03T16:30:28Z

Okay so after more than 20 restarts with clear cache option, it works. I don't know why.

adblanc · 2019-09-12T22:19:31Z

Hi, same problem here after upgrading from sdk 33 to 34

Bournegit · 2019-09-14T07:12:10Z

upgraded from sdk 32 to 33 .
Changed import {Font} from 'expo'
to import * as Font from 'expo-font'

Same error as above

miversen · 2019-09-24T07:22:22Z

I'm also having this problem

SteveAquino · 2019-09-25T15:06:20Z

I'm having this issue as well with Expo SDK 35. rm -rf ./node_modules/expo/node_modules/expo-font/ fixed the issue for me, but obviously nuking node modules and reinstalling causes the issue to come back. For now I'm adding this as a postinstall script in package.json.

superyarik · 2019-10-03T12:08:44Z

face this issue with custom fonts. In code i wait untill resolves this

Font.loadAsync({
            'ProximaNovaRegular': require('./src/assets/fonts/Proxima-Nova-Regular.otf'),
            'ProximaNovaBold': require('./src/assets/fonts/Proxima-Nova-Bold.otf'),
            'PTMono': require('./src/assets/fonts/PTM55FT.ttf'),
        });

after i render my app. And looks like promise resolves before it loaded and i receive same errors like

fontFamily "ProximaNovaRegular" is not a system font and has not been loaded through Font.loadAsync.

If you intended to use a system font, make sure you typed the name correctly and that it is supported by your device operating system.

If this is a custom font, be sure to load it with Font.loadAsync.

fikrikarim · 2019-10-05T06:54:16Z

I updated the expo-font version from 6.0.1 to 7.0.0 and it's working.

macfanatic · 2019-10-06T16:14:42Z

I didn't have this issue upgrading from SDK 33 => 34 (ejected), but I am with the 34 => 35 upgrade I'm performing this morning.

I have erased the iOS simulator content & settings multiple times, cleared the build in Xcode, delete the node_modules folder, and started the expo server with the cache clear option multiple times.

I have also tried suggestions from all of these issues:

The suggestion above about removing the nested expo-font folder as part of a post-install script was the only one that fixed the issue for me.

macfanatic · 2019-10-15T14:02:11Z

I believe I resolved the issue on our project yesterday.

We had react-native-unimodules locked to version ~0.5.4 in our package.json file. I noticed that in the lock file that referenced ~6.0.0 of several libraries from expo, including the font library. Those appear to be SDK 34 versions.

I updated react-native-unimodules to the next version, ~0.6.0 and re-installed and now see that the dependencies reference ~7.0.0 of the expo libraries. When going through the package lock file I no longer see multiple references to the font library. I was able to remove that post install script I had been using.

The reason I came back to visit was that while the app worked well for iOS and Android in the emulators, one we published the iOS app via TestFlight font awesome fonts were showing as question marks. The Android build worked fine. We are distributing as a standalone ejected app.

lucas-wilmart · 2019-10-18T08:03:26Z

I face this issue as well trying to update expo from 33 to 34. I tried many, many things, differents version of expo-font, clearing cache, clearing node_modules, different versions of expo, deleting yarn.lock, nothing works. And I really need to update to SDK 34 because Calendar Events don't work propertly in 33 and my client needs them to work.

lucas-wilmart · 2019-10-18T08:17:40Z

I finally solved it. Turns out the error had nothing to do with expo-fonts, the error displaying was misleading. I used to import assets this way in my App.js file:
import { Asset } from 'expo'

And importing this way:
import { Asset } from 'expo-asset'

fixed the errors of loading fonts.

sjchmiela · 2019-11-26T12:26:06Z

I'll let myself close this issue tentatively. I think we've identified the underlying problem and some solutions have been proposed in this thread. I hope you don't bump into this issue in the future, but if you do, let us know! 🙂

jalchr · 2019-12-01T19:46:36Z

@sjchmiela Any plans to port those "solutions" into expo ?

celandro · 2020-03-28T21:25:29Z

This issue popped up again when i upgraded from v35 to v36. Only rm -rf ./node_modules/expo/node_modules/expo-font/ worked for me

YahiaBadr · 2020-04-02T00:32:05Z

if you are using any of these libraries i found that they make conflict
react-native-svg or react-native-svg-transformer.
If so, then remove them using yarn remove or npm uninstall.
Also, if you have the file called metro.config.js,
remove it and its link in the app.json, "config": "metro.config.js"

brentvatne · 2020-04-02T00:44:32Z

@YahiaBadr - those libraries should work fine! i just set them up and they worked as expected. make sure you install react-native-svg with expo install and follow the setup instructions from the react-native-svg-transformer repo! :)

YahiaBadr · 2020-04-02T00:48:12Z

@brentvatne i was searching for almost a day for my problem and it ended up with creating a new app using expo init and move every file and make every single step to trace my error until i reached this one. I will check their repo, i could make a mistake while using them. But i suffered from this error.

YahiaBadr · 2020-04-02T00:54:57Z

@brentvatne - that's really crazy, i installed them again and they worked smoothly. I think the problem that i didn't use expo install the first time i installed them. Any way THANK YOUUU!!

aeife · 2020-04-03T09:19:47Z

This issue popped up for me after upgrading to sdk 37. As i do not have a metro.config.js this is no solution. Removing the expo-font in node_modules folder of expo works but surely is no permanent solution.

brentvatne · 2020-04-04T18:03:56Z

@aeife - it's basically an issue with npm not deduping dependencies in a way we can rely on. we added a workaround in latest expo-cli for this, we clear your lockfile and node_modules for you when you run upgrade. discussed more in https://forums.expo.io/t/sdk-37-unrecognized-font-family/35201/11?u=notbrent which i have inlined here for convenience:

hi everybody! i looked into this based off of a friendly person on twitter providing me with some info, and it seems that npm does not do a very good job of deduping modules with the same version in node_modules in some cases. so, i updated expo-cli so that when you run expo upgrade it will delete your package-lock.json and node_modules, then reinstall everything, as you would have to do manually to get this to work anyways.

so, i would suggest the following:

if you have already upgraded and not reverted, just install the latest expo-cli with npm i -g expo-cli and then run expo upgrade in your project again - this is a useful trick to ensure that all of your packages are using the correct version, you can run it as many times as you want on the same project and if you're already on the latest version it will just reinstall whatever is needed for that version.

if you are still on an old sdk version, be sure to install the latest expo-cli with npm i -g expo-cli and run expo upgrade as usual

AamuLumi added the bug label Aug 30, 2019

AamuLumi mentioned this issue Aug 30, 2019

Cannot load any fonts expo/vector-icons#106

Closed

cruzach added the Font label Aug 30, 2019

cruzach changed the title ~~Expo cannot load a font because he's working with 2 expo-font modules~~ [Font] Expo cannot load a font due to multiple versions of expo-font installed Sep 26, 2019

cruzach assigned sjchmiela Sep 26, 2019

callyb mentioned this issue Oct 7, 2019

Unable to resolve "./Google" from "node_modules/expo/build/ExpoLazy.js" #4956

Closed

sjchmiela closed this as completed Nov 26, 2019

kamalkishor1991 mentioned this issue Mar 12, 2020

better action button using react-native-action-button croma-app/huehive-mobile-app#29

Merged

celandro mentioned this issue Mar 28, 2020

font ionicons not found Expo SDK36 with NativeBase 2.13.8 and expo-font 8.1.0 GeekyAnts/NativeBase#3108

Closed

4 tasks

expo locked as resolved and limited conversation to collaborators Apr 4, 2020

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Font] Expo cannot load a font due to multiple versions of `expo-font` installed #5507

[Font] Expo cannot load a font due to multiple versions of `expo-font` installed #5507

AamuLumi commented Aug 30, 2019

cruzach commented Aug 30, 2019

HackJack-101 commented Sep 2, 2019

cruzach commented Sep 3, 2019

HackJack-101 commented Sep 3, 2019

HackJack-101 commented Sep 3, 2019

adblanc commented Sep 12, 2019

Bournegit commented Sep 14, 2019

miversen commented Sep 24, 2019

SteveAquino commented Sep 25, 2019

superyarik commented Oct 3, 2019

fikrikarim commented Oct 5, 2019

macfanatic commented Oct 6, 2019 •

edited

Loading

macfanatic commented Oct 15, 2019

lucas-wilmart commented Oct 18, 2019

lucas-wilmart commented Oct 18, 2019 •

edited

Loading

sjchmiela commented Nov 26, 2019

jalchr commented Dec 1, 2019

celandro commented Mar 28, 2020

YahiaBadr commented Apr 2, 2020 •

edited

Loading

brentvatne commented Apr 2, 2020 •

edited

Loading

YahiaBadr commented Apr 2, 2020

YahiaBadr commented Apr 2, 2020 •

edited

Loading

aeife commented Apr 3, 2020

brentvatne commented Apr 4, 2020

[Font] Expo cannot load a font due to multiple versions of expo-font installed #5507

[Font] Expo cannot load a font due to multiple versions of expo-font installed #5507

Comments

AamuLumi commented Aug 30, 2019

🐛 Bug Report

Environment

Steps to Reproduce

Expected Behavior

Actual Behavior

Bug explanation

cruzach commented Aug 30, 2019

HackJack-101 commented Sep 2, 2019

cruzach commented Sep 3, 2019

HackJack-101 commented Sep 3, 2019

HackJack-101 commented Sep 3, 2019

adblanc commented Sep 12, 2019

Bournegit commented Sep 14, 2019

miversen commented Sep 24, 2019

SteveAquino commented Sep 25, 2019

superyarik commented Oct 3, 2019

fikrikarim commented Oct 5, 2019

macfanatic commented Oct 6, 2019 • edited Loading

macfanatic commented Oct 15, 2019

lucas-wilmart commented Oct 18, 2019

lucas-wilmart commented Oct 18, 2019 • edited Loading

sjchmiela commented Nov 26, 2019

jalchr commented Dec 1, 2019

celandro commented Mar 28, 2020

YahiaBadr commented Apr 2, 2020 • edited Loading

brentvatne commented Apr 2, 2020 • edited Loading

YahiaBadr commented Apr 2, 2020

YahiaBadr commented Apr 2, 2020 • edited Loading

aeife commented Apr 3, 2020

brentvatne commented Apr 4, 2020

[Font] Expo cannot load a font due to multiple versions of `expo-font` installed #5507

[Font] Expo cannot load a font due to multiple versions of `expo-font` installed #5507

macfanatic commented Oct 6, 2019 •

edited

Loading

lucas-wilmart commented Oct 18, 2019 •

edited

Loading

YahiaBadr commented Apr 2, 2020 •

edited

Loading

brentvatne commented Apr 2, 2020 •

edited

Loading

YahiaBadr commented Apr 2, 2020 •

edited

Loading