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 — segFault
– segFault, Commented Feb 6, 2023 at 2: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
– haptn, Commented Feb 6, 2023 at 3:39

Ahmed Sbai · Accepted Answer · 2023-02-06 02:29:17Z

1

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

answered Feb 6, 2023 at 2:29

Ahmed Sbai

16.5k11 gold badges34 silver badges54 bronze badges

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

Collectives™ on Stack Overflow

Error "Element type is invalid" React component

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related