Font Error when debugging with cli

I suddenly started getting below error on code that is built and working in prod with no changes to the code.

I get the error when I try to run and debug locally using the expo cli and the exp app.

I stepped through the debugger and font loading code seems to be working.

fontFamily “Ionicons” is not a system font and has not been loaded through Font.loadAsync.

THis is where the font get loaded. Any suggestions would be appreciated. Thanks

export default class App extends React.Component {
state = {
fontLoaded: false,
isReady: false,
};

async componentDidMount() {
this.loadFonts();
}

async loadFonts() {
await Font.loadAsync({
Roboto_medium: require(‘native-base/Fonts/Roboto_medium.ttf’),
});
await Font.loadAsync({
Roboto_light: require(‘./assets/fonts/Roboto-Light.ttf’),
});
await Font.loadAsync({
Ionicons: require(‘@expo/vector-icons/fonts/Ionicons.ttf’),
});
await Font.loadAsync({
Feather: require(‘@expo/vector-icons/fonts/Feather.ttf’),
});
await Font.loadAsync({
SimpleLineIcons: require(‘@expo/vector-icons/fonts/SimpleLineIcons.ttf’),
});
this.setState({ fontLoaded: true });
}

SDK 36
Android

It turns out I was not on sdk 36, the expo upgrade had errored out on an npm issue.

I have now successfully upgraded to Sdk 36 and am getting the below font error.

Unable to resolve “@expo/vector-icons/fonts/Ionicons.ttf” from “App.js”
Failed building JavaScript bundle.

I tried these commands with no luck:

rm -rf $TMPDIR/react-* && rm -rf node_modules/ && rm -f package-lock.json && rm -f yarn.lock && npm cache verify && npm install && expo r -c

ANy suggestion would be greatly appreciate :slight_smile:

icon file paths changes, so got passed that error.

But now debugger does not work, and gives below error. I can build an APK, and verified the app is working, just getting this MEtro debugger error now.

Error: Unable to resolve module ./debugger-ui/debuggerWorker.d9da4ed7 from ``:

None of these files exist:

  • debugger-ui/debuggerWorker.d9da4ed7(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.json|.json)
  • debugger-ui/debuggerWorker.d9da4ed7/index(.native|.native.ts|.ts|.native.tsx|.tsx|.native.js|.js|.native.json|.json)
    at ModuleResolver.resolveDependency (/Users/garshakhatiblou/Documents/src/gpapp2/gpapp/node_modules/metro/src/node-haste/DependencyGraph/ModuleResolution.js:163:15)
    at ResolutionRequest.resolveDependency (/Users/garshakhatiblou/Documents/src/gpapp2/gpapp/node_modules/metro/src/node-haste/DependencyGraph/ResolutionRequest.js:52:18)

Had to upgrade native-base, now everything working.

1 Like

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.