Unable to load fonts after upgrading SDK from 33 to 34

Expo SDK
1

Unable to loads fonts after upgrading SDK from 33 to 34. Fails with:

console.error: "fontFamily “monserrat-bold” is not a system font and has not been loaded through Font.loadAsync.

Here’s the loading stuff from App.js …Font Icons are not loaded either.

async function loadResourcesAsync() {
	await Promise.all([
		Asset.loadAsync([
			require('./assets/images/splash.png'),
			require('./assets/images/icon.png'),
			require('./assets/images/icon-adaptive.png'),
			require('./assets/images/vegan.png'),
			require('./assets/images/vegetarian.png'),
			require('./assets/images/cauldron.png'),
			require('./assets/images/tabacos.png'),
			require('./assets/images/qr-400.png'),
			require('./assets/images/loading.gif')
		]),
		Font.loadAsync({
			...Ionicons.font,
			...MaterialCommunityIcons.font,
			...Foundation.font,
			'montserrat-regular': require('./assets/fonts/Montserrat-Regular.ttf'),
			'montserrat-bold': require('./assets/fonts/Montserrat-Bold.ttf'),
		}),
	]);
}
2

I think this was an issue (also affecting vector icons) that has since been fixed. See the following:

and

3 Likes
3

Thanks for chiming in here, @wodin!

1 Like
4

@wodin …does not work here …but did a couple of things and now it works.

I think the issue was having “react-native-elements” installed wich required “react-native-vector-icons”.

Wasn’t an issue before SDK 34. Seemed to have solved it …not sure I am actually using “react-native-elements” though, but I have a reference somewhere.

5

did you change your babel config? you need to use babel-preset-expo

1 Like
6

@notbrent are you saying my JavaScript is old-school? kidding

no I do not have that one …but it works now …I’m up and running again!

Just posted a couple of minutes before your post …thanks for replying! :slight_smile:

Think I needed “react-native-vector-icons” to please “react-native-elements” somehow. Might be a smaller mess I need to clean up. Don’t think I use or should use “react-native-elements”.

7

Ok …I removed “react-native-vector-icons” and “react-native-elements” …and I’m back to the same.

My babel-preset-expo looks like this. Didn’t change it.

module.exports = function(api) {
  api.cache(true);
  return {
    presets: ['babel-preset-expo'],
  };
};
8

can you try to reproduce this on a new project and share that?

1 Like
9

Ok …I made an empty TabBar project.

Added fonts. The ‘space-mono’ font did not get loaded with a a loader like this:

async function loadResourcesAsync() {
  await Promise.all([
    Asset.loadAsync([
      require('./assets/images/robot-dev.png'),
      require('./assets/images/robot-prod.png'),
    ]),
    Font.loadAsync({
		...Ionicons.font,
		...MaterialCommunityIcons.font,
		...MaterialIcons.font,
		...Foundation.font,
		...FontAwesome.font,
		'montserrat-regular': require('./assets/fonts/Montserrat-Regular.ttf'),
		'montserrat-bold': require('./assets/fonts/Montserrat-Bold.ttf'),
		'space-mono': require('./assets/fonts/SpaceMono-Regular.ttf'),
    }),
  ]);
}

If I remove these lines it works:

		...MaterialCommunityIcons.font,
		...MaterialIcons.font,
		...Foundation.font,
		...FontAwesome.font,

Does that make sense? I tried removing them individually, but no luck.

10

And not preloading them from my main project makes it load without errors …but …that is not entirely correct, right?

11

can you share the full new project that you reproduced this in? just on github would be good

1 Like
13

Is this good enought @notbrent ?

14

the problem is that you aren’t importing any of the fonts except for Ionicons :stuck_out_tongue:

you can see that before the error in logs:

Can't find variable: MaterialCommunityIcons
* App.js:39:28 in loadResourcesAsync$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:271:30 in invoke

if you change the import it works fine

import {
  Ionicons,
  MaterialCommunityIcons,
  MaterialIcons,
  Foundation,
  FontAwesome,
} from '@expo/vector-icons';
1 Like
15

They need to be imported because they are referenced as variables …makes a lot of sense now …thanks a lot !!!

I’m amazed it worked before though …

16

i don’t think it did work in the way you expected before :slight_smile:

17

@notbrent is it worth notising that it did not give errors on the items that was not imported, but rather on the last item in the array. So basicly it returns an error for an item that works and that made it really difficult finding the error because it was pointing at the wrong spot.

Thanks for helping me out!

Best …,
Andy

18

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