expo: PluginError: Package "expo-font" does not contain a valid config plugin.

Minimal reproducible example

https://snack.expo.dev/@szmarczak/crabby-red-marshmallows

Summary

Minimal reproducible example is just a link to default snack project so this issue doesn’t get closed automatically.


> npm run start -- --android

> the-trolley-app@1.0.0 start
> expo start --android

Starting project at C:\Users\szmar\Desktop\the-trolley-app
PluginError: Package "expo-font" does not contain a valid config plugin.
Learn more: https://docs.expo.dev/guides/config-plugins/#creating-a-plugin

Unexpected token 'export'
C:\Users\szmar\Desktop\the-trolley-app\node_modules\expo-font\build\index.js:1
export * from './Font';
^^^^^^

SyntaxError: Unexpected token 'export'
    at internalCompileFunction (node:internal/vm:73:18)
    at wrapSafe (node:internal/modules/cjs/loader:1175:20)
    at Module._compile (node:internal/modules/cjs/loader:1219:27)
    at Module._extensions..js (node:internal/modules/cjs/loader:1309:10)
    at Module.load (node:internal/modules/cjs/loader:1113:32)
    at Module._load (node:internal/modules/cjs/loader:960:12)
    at Module.require (node:internal/modules/cjs/loader:1137:19)
    at require (node:internal/modules/helpers:121:18)
    at requirePluginFile (C:\Users\szmar\Desktop\the-trolley-app\node_modules\@expo\config-plugins\build\utils\plugin-resolver.js:214:12)
    at resolveConfigPluginFunctionWithInfo (C:\Users\szmar\Desktop\the-trolley-app\node_modules\@expo\config-plugins\build\utils\plugin-resolver.js:155:14)

Environment

> npx expo-env-info
Need to install the following packages:
  expo-env-info@1.2.0
Ok to proceed? (y) y

  expo-env-info 1.2.0 environment info:
    System:
      OS: Windows 11 10.0.22631
    Binaries:
      Node: 20.2.0 - C:\Program Files\nodejs\node.EXE
      npm: 9.7.2 - C:\Program Files\nodejs\npm.CMD
    npmPackages:
      expo: 49.0.8 => 49.0.8 
      react: 18.2.0 => 18.2.0 
      react-native: 0.72.9 => 0.72.9 
    Expo Workflow: bare
"expo": "49.0.8",
"expo-font": "11.4.0",

About this issue

  • Original URL
  • State: closed
  • Created 5 months ago
  • Reactions: 6
  • Comments: 16 (3 by maintainers)

Most upvoted comments

@nunathanw @c2tarun @mzaien

expo-font@11.10.2 worked for me

  1. Run npx expo install --fix to ensure you are using a version of expo-font compatible with your version of the Expo SDK.

  2. You can only use the expo-font config plugin from Expo SDK 50. It won’t work in Expo SDK 49

Hi there! It looks like your issue requires a minimal reproducible example, but it is invalid or absent. Please prepare such an example and share it in a new issue.

The best way to get attention to your issue is to provide a clean and easy way for a developer to reproduce the issue on their own machine. Please do not provide your entire project, or a project with more code than is necessary to reproduce the issue.

A side benefit of going through the process of narrowing down the minimal amount of code needed to reproduce the issue is that you may get lucky and discover that the bug is due to a mistake in your application code that you can quickly fix on your own.

Resources

Common concerns

“I’ve only been able to reproduce it in private, proprietary code”

You may not have spent enough time narrowing down the root cause of the issue. Try out the techniques discussed in this manual debugging guide to learn how to isolate the problem from the rest of your codebase.

“I didn’t have time to create one”

That’s understandable, it can take some time to prepare. We ask that you hold off on filing an issue until you are able to fully complete the required fields in the issue template.

“You can reproduce it by yourself by creating a project and following these steps”

This is useful knowledge, but it’s still valuable to have the resulting project that is produced from running the steps, where you have verified you can reproduce the issue.

@c2tarun @nunathanw @mzaien

“expo”: “50.0.2” “expo-font”: “~11.10.2”,

hi there! it looks like "expo": "49.0.8" with "expo-font": "11.4.0" is a correct setup for sdk 49, but it’s strange make sense for me that expo-font@11.4.0 doesn’t have any config-plugins. would be great if you could provide a minimal repro for further troubleshooting.

@squidis

On second thought I also removed the expo-font section from the plugins object in app.config.js

This does not solve the issue.

@Kudo

Run npx expo install --fix to ensure you are using a version of expo-font compatible with your version of the Expo SDK.

I already have tried that. Anyway, 11.4.0 is the correct version for SDK 49.

it’s strange make sense for me that expo-font@11.4.0 doesn’t have any config-plugin

For some reason it tries to require an ESM file from a CJS one. This is clearly a bug in Expo. I actually checked newer versions and it seems that with 11.8.0 the issue is gone. However, there’s a catch:

 ERROR  fontFamily "Montserrat_700Bold" 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.
    at RCTText
    at Text (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:81058:27)
    at Text (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:131925:38)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at Pressable (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:119549:27)
    at BottomNavigationButton (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130727:20)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at BottomNavigation (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130779:31)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at anonymous (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:70834:62)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at AppView (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130846:42)
    at Color (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:131915:21)
    at AppViewWithFont (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130921:37)
    at ToastProvider (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:186694:24)
    at SafeAreaInsetsProvider (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:168758:24)
    at LocalizationContextProvider (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:167175:24)
    at ThemeProvider (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:168907:24)
    at ColorSchemeProvider (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:168947:24)
    at App (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130949:69)
    at Bootstrap
    at withDevTools(Bootstrap) (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:130299:27)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at RCTView
    at View (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:63150:43)
    at AppContainer (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:62990:36)
    at main(RootComponent) (http://192.168.0.157:8081/node_modules%5Cexpo%5CAppEntry.bundle//&platform=android&dev=true&hot=false&lazy=true:109365:28)

The thing is, I did load it with loadAsync. The above is fixed when I pass processFontFamily’d the font name before passing it to the fontFamily Text prop.

if you could provide a minimal repro for further troubleshooting.

Sorry, unfortunately I won’t give any effort anymore as I decided to never step into React Native ever again. The entire ecosystem is buggy as hell making the app development impossible. At least in the current state. Instead of developing the app, most of the time I’m just thinking of workarounds. I spent endless hours debugging why text wrapping doesn’t work or some flex behaviors don’t work. Or rendering a Text component with custom font takes up to 7ms in a development build. In a release build, rendering 100 Text components at once takes ~1s. And some more react-native issues. Not to mention bugs I encountered but didn’t create an issue for because I got tired of them (example: https://gist.github.com/szmarczak/dc088c9ef6db8f8e29059591e69f86b0). disappears into void