Asset.fromModule is not a function. (In 'Asset.fromModule(image)', 'Asset.fromModule' is undefined)

Question

After updating to Expo sdk 34, I am getting this error: TypeError: Asset.fromModule is not a function. (In 'Asset.fromModule(image)', 'Asset.fromModule' is undefined).

I have ran the cod-mod which Expo recommends using this command: npx expo-codemod sdk33-imports src when updating to new versions, and I've also tried changing import * as Asset from 'expo-asset'; to import { Asset } from 'expo-asset', but neither of these changes have fixed this warning.

This is my App.js

import React from 'react';
import { Dimensions, Alert } from 'react-native';
import {Root} from 'native-base';
import {createRootNavigator} from './router';
import {configureFontAwesomePro} from "react-native-fontawesome-pro";
import Geocoder from 'react-native-geocoding';
import { AppLoading } from 'expo';
import * as Asset from 'expo-asset';
import * as Font from 'expo-font';
import Api from './services/api';
import Moment from 'moment';
import Config from './config/config';
import './i18n';
import store from './store/store';
import i18n from 'i18n-js';

configureFontAwesomePro();
const RootNav = createRootNavigator();

function cacheImages(images) {

    return images.map(image => {
        if (typeof image === 'string') {
            return Image.prefetch(image);
        } else {
            return Asset.fromModule(image).downloadAsync();
        }
    });
}

function cacheFonts(fonts) {
    return fonts.map(font => Font.loadAsync(font));
  }


export default class App extends React.Component {
    constructor() {
        super();
        this.state = {
            isReady: false
        };

    }

    async _loadAssetsAsync() {
        const imageAssets = cacheImages([
            require('./assets/images/splash.png'),
            require('./assets/images/splash-logo.png'),
            require('./assets/images/hotdrink.png'),
            require('./assets/images/insta.png'),
            require('./assets/images/twitter.png'),
            require('./assets/images/facebook.png'),
            require('./assets/images/yelp.png'),
        ]);

        store.updatePrefix(Expo.Linking.makeUrl('/'));

        const fontAssets = cacheFonts(
            [{
                Roboto: require("native-base/Fonts/Roboto.ttf"),
                Roboto_medium: require("native-base/Fonts/Roboto_medium.ttf"),
                Ionicons: require("@expo/vector-icons")
            }]
        );

        await Promise.all([...imageAssets, ...fontAssets]);
    }

    render() {
        if (!this.state.isReady) {
            return (<AppLoading
                startAsync={this._loadAssetsAsync}
                onFinish={() => this.setState({isReady: true})}
                onError={(error) => console.log('app js: ', error)}
            />)
        }
        return (
            <Root>
                <RootNav uriPrefix={store.prefix} />
            </Root>
        )
    }
}

Geocoder.init(Config.google_maps_key);

Edit: After making the changes suggested below: - changing the import of asset from import * as Asset from 'expo-asset'; to import { Asset } from 'expo-asset'; - I am now getting this error, which is slightly different than the one I originally wrote about - TypeError: asset.downloadAsync is not a function. (In 'asset.downloadAsync()', 'asset.downloadAsync' is undefined).

Answer 1

Seems like this should just be import { Asset } from "expo-asset"; instead of import * as Asset from 'expo-asset';.

I figured this out since that import statement looked odd, so I copied your App.js into a fresh create-react-native-app install, added a few of the dependencies and commented out the bits that seemed unrelated or references to files that aren't posted here. I got the TypeError: Asset.fromModule is not a function. (In 'Asset.fromModule(image)', 'Asset.fromModule' is undefined) warning, changed the import line, and the app loaded (it didn't do much, but with so much commented out that was expected).

The import statement is pretty easy to accidentally get wrong without actually generating an errors on the import line, may be worth refreshing on how as works when using it, see the docs on MDN