App.tsx

const App = async () => {
  return <div>Async Server Component</div>;
};

export default App;

index.tsx

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(
  document.getElementById('root') as HTMLElement
);
root.render(
  <>
    {/* @ts-expect-error Async Server Component */}
    <App />
  </>
);

I was trying to implement an app that calls a simple movie API to learn server components, but I ran into a problem.

When writing an asynchronous server component, I receive the following error:

Objects are not valid as a React child (found: [object Promise]). 
If you meant to render a collection of children, use an array instead.

I thought it was a conflict between Typescript and the server component,

so I used the “@ts-expect-error Async Server Component” directive, but the error still occurred.

How can I resolve this error?