I'm getting this error although my imports are fine.

Invariant Violation: 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 Weather.

My code looks like this:
App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Weather from './components/Weather';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Weather />
      </View>
    );
  }
}

Weather.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';

export default Weather = () => (
  <View style={styles.weatherContainer}>
    <View style={styles.headerContainer}>
        <Icon size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}> Temperature </Text>
    </View>
    <View style={styles.bodyContainer}>
        <Text style={styles.title}>Sunny</Text>
        <Text style={styles.subtitle}>Hurts the eyes!</Text>
    </View>
  </View>
);

I've checked previous answers, tried both with named and default exports, but still having the error. Thanks.

I'm getting this error although my imports are fine.

Invariant Violation: 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 Weather.

My code looks like this:
App.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import Weather from './components/Weather';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Weather />
      </View>
    );
  }
}

Weather.js

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';

export default Weather = () => (
  <View style={styles.weatherContainer}>
    <View style={styles.headerContainer}>
        <Icon size={48} name="weather-sunny" color={'#fff'} />
        <Text style={styles.tempText}> Temperature </Text>
    </View>
    <View style={styles.bodyContainer}>
        <Text style={styles.title}>Sunny</Text>
        <Text style={styles.subtitle}>Hurts the eyes!</Text>
    </View>
  </View>
);

I've checked previous answers, tried both with named and default exports, but still having the error. Thanks.

• javascript
• reactjs
• react-native

• Check if import Weather from './components/Weather'; is correct. Most likely the component isn't in this path. – romin21 Commented Jun 2, 2019 at 19:25
• Where is styles coming from? – Neil Commented Jun 2, 2019 at 19:40
• @Neil, style is in the same file, just didn't post it in the question. – Moad Ennagi Commented Jun 2, 2019 at 20:24

1 Answer 1

After several hours of banging my head against the wall I managed to debug, the error is related to this import (not the weather import):

import { Icon } from 'react-native-vector-icons/MaterialCommunityIcons';.
This should be a default import like this:
import Icon from ...