How to fix Element type is invalid: expected a string (for built-in components)?

Question

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.

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 ...