undefined is not an object (evaluating '_expoFont.default.loadAsync')

Question

I've got this problem and did't find right answer.

undefined is not an object (evaluating '_expoFont.default.loadAsync')
* App.js:77:17 in _callee$
- 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
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:135:28 in invoke
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:170:17 in <unknown>
- node_modules/promise/setimmediate/core.js:45:7 in tryCallTwo
- node_modules/promise/setimmediate/core.js:200:23 in doResolve
- node_modules/promise/setimmediate/core.js:66:12 in Promise
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:169:27 in callInvokeWithMethodAndArg
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:192:38 in enqueue
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:216:8 in async
* App.js:74:23 in _callee
- node_modules/expo/build/launch/AppLoading.js:13:22 in _callee$
- node_modules/@babel/runtime/node_modules/regenerator-runtime/runtime.js:45:44 in tryCatch
- ... 35 more stack frames from framework internals

This is exactly how it looks like:

Here's the App.js

import { AppLoading } from 'expo'; import { Asset } from 'expo-asset'; import Font from 'expo-font'; import React from 'react'; import { Feather } from '@expo/vector-icons'; import { Block } from './components' import AppNavigator from './navigation/AppNavigator'; import MainTabNavigator from './navigation/MainTabNavigator';

    // Firebase import ApiKeys from './constants/ApiKeys'; import * as firebase from 'firebase'

const images = [   require('./assets/icons/back.png'),   require('./assets/images/illustration_1.png'),  

require('./assets/images/illustration_2.png'),
require('./assets/images/illustration_3.png'),
require('./assets/images/dealsBackground.png'), ];

class App extends React.Component {
     constructor(props) {
    super(props);
    this.state = {
      isLoadingComplete: false,
      isAuthenticationReady: false,
      isAuthenticated: false,
    };

    // Initialize firebase...
    if (!firebase.apps.length) { firebase.initializeApp(ApiKeys.firebaseConfig); }
    firebase.auth().onAuthStateChanged(this.onAuthStateChanged);   }

  onAuthStateChanged = (user) => {
    this.setState({isAuthenticationReady: true});
    this.setState({isAuthenticated: !!user});   }

  render() {
    if ( (!this.state.isLoadingComplete || !this.state.isAuthenticationReady) && !this.props.skipLoadingScreen) {
      return (
        <AppLoading
          startAsync={this.loadResourcesAsync}
          onError={this._handleLoadingError}
          onFinish={this._handleFinishLoading}
        />
      );
    } else {
      return (
          <Block white>
            {(this.state.isAuthenticated) ? <MainTabNavigator /> : <AppNavigator />}
          </Block>
      );
    }   }

  loadResourcesAsync = async () => {
    return Promise.all([
      Asset.loadAsync(images),
      await Font.loadAsync(Feather.font)
    ]);   };

  _handleLoadingError = error => {
    // In this case, you might want to report the error to your error
    // reporting service, for example Sentry
    console.warn(error);   };

  _handleFinishLoading = () => {
    this.setState({ isLoadingComplete: true });   }; }

export default App;

I think, I have no error in it and the app working fine.

The correct answer is:

import * as Font from 'expo-font';

Answer 1

The correct answer is import * as Font:

import * as Font from 'expo-font';