App doesn't work after upgrade from 39 to 42

Expo SDK
1

Please provide the following:

  1. SDK Version: 42
  2. Platforms(Android/iOS/web/all): Android
  3. Add the appropriate “Tag” based on what Expo library you have a question on.

We updated our app from the SDK 39 to 42 and there are some errors and warning that stopped the app.

Please find the errors and our code below

Errors

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:62.
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react/cjs/react.development.js:315:4 in printWarning
at node_modules/react/cjs/react.development.js:287:16 in error
at node_modules/react/cjs/react.development.js:1788:11 in createElementWithValidation
at App.js:62:8 in render
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check your code at App.js:62.
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react/cjs/react.development.js:315:4 in printWarning
at node_modules/react/cjs/react.development.js:287:16 in error
at node_modules/react/cjs/react.development.js:1788:11 in createElementWithValidation
at App.js:62:8 in render
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/setUpErrorHandling.js:24:6 in handleError
at node_modules/expo-error-recovery/build/ErrorRecovery.fx.js:12:21 in ErrorUtils.setGlobalHandler$argument_0

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of `App`.

This error is located at:
    in App (created by ExpoRoot)
    in ExpoRoot (at renderApplication.js:45)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:106)
    in RCTView (at View.js:34)
    in View (at AppContainer.js:132)
    in AppContainer (at renderApplication.js:39)
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:104:6 in reportException
at node_modules/react-native/Libraries/Core/ExceptionsManager.js:171:19 in handleException
at node_modules/react-native/Libraries/Core/ReactFiberErrorDialog.js:43:2 in showErrorDialog
at node_modules/react-native/Libraries/ReactNative/renderApplication.js:54:4 in renderApplication
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:117:25 in runnables.appKey.run
at node_modules/react-native/Libraries/ReactNative/AppRegistry.js:213:4 in runApplication

App.js

import React from 'react';
import { AppLoading } from 'expo';
import { Asset } from 'expo-asset';
import * as Font from 'expo-font';
import { Provider } from 'react-redux';
import { Root, StyleProvider } from 'native-base';

import configureStore from './src/store/configureStore';
import carrentalTheme from './src/theme/variables/carrental';
import getTheme from './src/theme/components';
import AppNavigation from './src/navigation';

const store = configureStore();
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'),
      Roboto_light: require('./assets/fonts/Roboto-Light.ttf'),
      Ionicons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Ionicons.ttf'),
      Feather: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/Feather.ttf'),
      SimpleLineIcons: require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf'),
      'simple-line-icons': require('@expo/vector-icons/build/vendor/react-native-vector-icons/Fonts/SimpleLineIcons.ttf'),
    });
    this.setState({ fontLoaded: true });
  }

  async cacheResourcesAsync() {
    const images = [
      require('./assets/images/splash.png'),
      require('./assets/images/logo.png'),
      require('./assets/images/background1.png'),
      require('./assets/images/background2.png'),
      require('./assets/images/header-bg.png'),
      require('./assets/images/home-bg.png'),
      require('./assets/images/walkthrough1.png'),
      require('./assets/images/walkthrough2.png'),
      require('./assets/images/walkthrough3.png'),
      require('./assets/images/payments/visa.png'),
      require('./assets/images/payments/mastercard.png'),
      require('./assets/images/payments/paypal.png'),
      require('./assets/images/cars/toyota_camry.png'),
    ];

    const cacheImages = images.map(image => {
      return Asset.fromModule(image).downloadAsync();
    });
    return Promise.all(cacheImages);
  }

  render() {
    if (!this.state.isReady || !this.state.fontLoaded) {
      return (
        <AppLoading
          startAsync={this.cacheResourcesAsync}
          onFinish={() => this.setState({ isReady: true })}
        />
      );
    }
    return (
      <StyleProvider style={getTheme(carrentalTheme)}>
        <Provider store={store}>
          <Root>
            <AppNavigation />
          </Root>
        </Provider>
      </StyleProvider>
    );
  }
}

With the SDK 39 the apps (and apk) works without any issue.
Thank you in advance for your help

2

Hi

You should read all the SDK release announcements and changelogs between SDK 39 and SDK 42 and take care of any depdecations/breaking changes.

In particular, line 62 of your App.js is:

        <AppLoading

If you check the import statements to see where AppLoading comes from you find this:

import { AppLoading } from 'expo';

In the SDK 40 announcement there is this:

AppLoading has been extracted from the expo package

If you use this component, you should run expo install expo-app-loading and import AppLoading from its own package: import AppLoading from 'expo-app-loading'; . This is part of an ongoing effort to make the expo package as lightweight as possible.

3

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