Import/Export problem with my React Native app

Question

I'm working on a React Native Instagram clone app using Android Studio and Visual Studio Code. I received a error in Android Studio when running the app in the emulator. This is my logcat error:

logcat error in Android Studio:

2020-06-10 15:30:32.881 11122-11329/com.instaclone E/ReactNativeJS: 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 `PostFeed`.

This error is located at:
    in PostFeed (at InstaClone.js:27)
    in RCTView (at InstaClone.js:21)
    in InstaClone (at App.js:7)
    in App (at renderApplication.js:45)
    in RCTView (at AppContainer.js:109)
    in RCTView (at AppContainer.js:135)
    in AppContainer (at renderApplication.js:39)

It's not receiving my data from my PostFeed.js file. I exported it in the PostFeed.js file and imported it in my InstaClone.js file where the logcat is pointing to the error. Here is my InstaClone.js code:

import React, { Component } from "react";
import {
  View,
  Text,
  StyleSheet,
  Image,
  Dimensions,
  TouchableOpacity
} from "react-native";
import config from "./config";

import { PostFeed } from './components/container';
import { Post } from "./components/presentation";

class InstaClone extends Component {

  render() {

    return (
      <View style={{ flex: 1, width: 100 + '%', height: 100 + '%' }}>
        <View style={styles.tempNav}>
          <Text>Instagram</Text>

        </View>

        <PostFeed />

      </View>

    );
  }
}
const styles = StyleSheet.create({
  tempNav: {
    width: 100 + '%',
    height: 56,
    marginTop: 20,
    backgroundColor: 'rgb(250,250,250)',
    borderBottomColor: "rgb(233,233,233)",
    borderBottomWidth: StyleSheet.hairlineWidth,
    justifyContent: "center",
    alignItems: "center"
  }

});


export default InstaClone;

PostFeed.js code:

import React, { Component } from 'react';
import { Flatlist } from 'react-native';
import { Post } from '../presentation';


class PostFeed extends Component {

  _renderPost({ item }) {
    return <Post item={item} />;
  }

  _returnKey(item) {
    return item.toString();
  }

  render() {

    return (
      <Flatlist
        data={[
          1,
          2,
          3,
          4,
          5,
          6,
          7,
          8,
          9,
          10,
          11,
          12,
          13,
          14,
          15,
          16,
          17,
          18,
          19,
          20
        ]}
        keyExtractor={this._returnKey}
        renderItem={this._renderPost}
      />
    );
  }
}

export default PostFeed;

The issue isn't in instaclone, it's in PostFeed. Can you post that? — Charlie Bamford
– Charlie Bamford, Commented Jun 10, 2020 at 20:01
PostFeed isn't being exported. The class definition line should be export class PostFeed extends Component { — Charlie Bamford
– Charlie Bamford, Commented Jun 11, 2020 at 15:42
I just tried it. It has the exact same error: forgot o export your component from the file it's defined in or you might have mixed up default and named imports — Jermaine Jones
– Jermaine Jones, Commented Jun 11, 2020 at 17:03

Matt Morgan · Accepted Answer · 2020-06-11 17:24:21Z

1

Your import syntax is mismatched with your export syntax. You are exporting PostFeed as a default, but trying to import it as a named import.

Default:

export default PostFeed;

// must use with:

import PostFeed from './components/container';

Named:

export PostFeed;

// must use with:

import {PostFeed} from './components/container';

You just need to pick one or the other and use it consistently where you export and import your class.

I would point out that the error message that you yourself posted in a comment essentially says this, but I admit it's not that clear!

answered Jun 11, 2020 at 17:24

Matt Morgan

5,3334 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Jermaine Jones Over a year ago

Yes it's a little confusing. Thanks for clearing this up. I'll go through my code and choose a consistent import export syntax. I'll post if it works or not

Jermaine Jones Over a year ago

I decided to scrap this project and start over. I believe my React Native environment was buggy. All of the advice received here was correct so thanks for everything.

Collectives™ on Stack Overflow

Import/Export problem with my React Native app

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related