Warning: React.jsx: 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.

[blockmood]

package.json

"@types/jest": "^27.0.1",
    "@types/node": "^16.7.13",
    "@types/react": "^18.0.0",
    "@types/react-dom": "^18.0.0",
    "antd": "^4.22.4",
    "react": "^18.2.0",

App.tsx

const Home = React.lazy(() => import('./Home/Home'))

function App() {
  return (
    <div className="App">
      <Suspense fallback={<div>loading...</div>}>
          <Home />
      </Suspense>
    </div>
  );
}
export default App

Home.tsx

import React from 'react';
import {Input, Checkbox} from 'antd';

const Home = () => {
  return <div>
    <Input />
  </div>
}

export default Home

yarn start The first rendering is normal

When I try again home When the < Checkbox / > component is added to the TSX render function, an error is reported as follows:

Ask for help TKS

[JaySun0]

I was getting the same error while trying to run "npm test" when imported component for testing wasn't imported right.
So in my case it was:

in Header-component I say "export default Header"
and
in my test files I imported it like "{ Header }" instead of just "Header"

[ashwinarumugam]

How did you find which file it was happening at. I'm not able to see any backlogs on which file is affected

[saschazesiger]

I have imported such modules thousands of times, but this time it took me almost half an hour to find the problem 😭

Thanks for the solution, works excellent now!

[reymondar]

In my case, exporting it as a default was the problem.

[CristianFigueredo]

In my case, I close the app and open it again

[daryazata]

wow, i guess next js should note to restart the app, when adding "use client", thanks-)

[hema-001]

In my case, I close the app and open it again

That's crazy, I had the same issue because I added 'use client' to the component. I did as @CristianFigueredo said here and it worked.

[Kashif-Ur-Rahman]

By adding "use client"; it worked for me.

[jrablazadev]

@Kashif-Ur-Rahman you save my life thank you!

[Felipesouzasi]

how can I add "use client"? Where?

[zsh77]

In my case, I was importing from "...../button" instead of "...../Button"

[CristianFigueredo]

Maybe you mean ../../?

[zsh77]

Not exactly. I meant that anything could be before “/button”. But in my case, the problem that led to this error message was that I should have used “/Button” instead of “/button”

[fcoble]

Uphold zsh77 comment. I had named a component file in all lower case and experienced the exact error referenced above.

[sebastianvitterso]

Note that these kinds of issues are prevalent when one teammember uses a mac (case insensitive disk) and another uses Windows/Linux.

[bradherman]

Ran into this today and worked for several hours... Due to some weird merge issue, I was exporting some components more than once in an index file, which caused the issue

[ezulfiqar]

In my case, I was exporting and importing a react component and type from the same file which was throwing this error.

Changed index.ts from

export * from './Component';

to

export { MyComponent } from './Component';
export type { MyComponentType } from './Component';

[qqiwi92]

In my case i used import MaterialIcons from '@expo/vector-icons'; instead of import { MaterialIcons } from '@expo/vector-icons';

[HectorFront]

In my case i created components with string FC in the end name of component... Only rename and load project with successfuly again...

[sovetski]

can you give an example of the code?

[HectorFront]

Before (Error):

export const MyComponentFC = () => {
    return (
        <div>Hello</div>
    )
}

After (Success)

export const MyComponent = () => {
    return (
        <div>Hello</div>
    )
}

[lukemassa]

In my case, it turns out I had cyclic dependencies I didn't know about. My app uses webpack which doesn't seem to mind them, but jest executes everything synchronously so it does.

Before:

import { MyComponent } from "./SomePath";

After:

const MyComponent = React.lazy(() => import("./SomePath"));

This probably isn't the best solution, but it helped me confirm that cyclic dependencies were my problem :)