Error "Element type is invalid" React component

Question

Many times I've seen this error, and honestly I never know how to fix it, or how i fixed it in the past ...

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

Here's my component implementation, I'm trying to understand what's wrong.

import React from 'react';
import { SvgFromUri } from 'react-native-svg';
import { Image } from 'react-native';
import { AppColors } from '../constants';

const imgSize = 55;

const CompanyIcon = ({ url }) => {

    return (
        <>
            {
                url && !url.includes('favicon')
                    ? <SvgFromUri uri={url} width={imgSize} height={imgSize} onError={console.error} />
                    : <Image source={require('../assets/app_icon48.png')} style={
                        {
                            borderWidth: 1, 
                            borderColor: AppColors.LIGHT_BLUE, 
                            borderRadius: 4,
                            width: imgSize,
                            height: imgSize
                        }
                    } />
            }
        </>
    );
}

export default CompanyIcon;

Thanks so much for any help community

The options I found research about it said something about exporting the component as default, so I did, but no success :(

Update: Looks like it's a bug within the svg component :| https://github.com/software-mansion/react-native-svg/issues/1742

Does this answer your question? [Uncaught Error: Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function but got: object](https://stackoverflow.com/questions/34130539/uncaught-error-invariant-violation-element-type-is-invalid-expected-a-string) — segFault, Feb 06 '23 at 02:17
Please check around `AppColors` or `AppColors.LIGHT_BLUE`, because the error said about the "expected a string". I guess the error may come from either of them. It could be the `AppColors`'s import (default or named imports), or the value of `AppColors.LIGHT_BLUE` is `undefined`. — haptn, Feb 06 '23 at 03:39

score 1 · Answer 1 · answered Feb 06 '23 at 02:29

check your exports, if you have a default export you should import like this :

import FunctionName from '../location'; // without {}

or maybe you

forgot to export your component from the file it's defined in, or you might have mixed up default and named imports

Error "Element type is invalid" React component

1 Answers1