Server Error Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined

Moralis General
#1

"# Server Error

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

I got this error when I ran “npm run dev” and I am confused about what to do. I am very new in web3 and moralis and solidity, and I would be please if I can be helped using simple and plain language.

below is the screenshot of my terminal and also my Card.js codes

import { useContext } from 'react'

import { TinderContext } from '../context/TinderContext'

import { SiTinder } from 'react-icons/si'

import CardHeader from './CardHeader'

import CardFooter from './CardFooter'

import TinderCardItem from './TinderCardItem'

const style = {

  wrapper: `h-[45rem] w-[27rem] flex flex-col rounded-lg overflow-hidden`,

  cardMain: `w-full flex-1 relative flex flex-col justify-center items-center bg-gray-500`,

  noMoreWrapper: `flex flex-col justify-center items-center absolute`,

  tinderLogo: `text-5xl text-red-500 mb-4`,

  noMoreText: `text-xl text-white`,

  swipesContainer: `w-full h-full overflow-hidden`,

}

const Card = () => {

  const { cardsData } = useContext(TinderContext)

  return (

    <div className={style.wrapper}>

      <CardHeader />

      <div className={style.cardMain}>

        <div className={style.noMoreWrapper}>

          <SiTinder className={style.tinderLogo} />

          <div className={style.noMoreText}>

            No More Profiles in your Location...

          </div>

        </div>

        <div className={style.swipesContainer}>

          {cardsData.map((card, index) => (

            <TinderCardItem card={card} key={index} />

          ))}

        </div>

      </div>

      <CardFooter />

    </div>

  )

}

export default Card

moralis
moralis1920×1020 120 KB

#2

Hi check all of your card component imports and make sure they have export default ... just like your Card.js. Make sure you do the same for your parent component(s) like App.js, etc.

Your TinderContext will need to have only export as it is named or wrapped in { }.

If you have trouble, remove all those imports and any references and add them back in one by one until you find where the issue(s) is.

#3

thank you so much, it worked