CODEWITHSUNDEEP
reactjstypescriptnext.js
Sem Stassen
Sem Stassen

Reputation: 11

async server component throwing error with new typescript version

I'm currently learning to develop a web-app using next.js and typescript.

For my front page I want to fetch some data and then display it. I fetch my data using an async function, but whenever I mark my component as async it throws the following TS-error:

'myComponent' cannot be used as a JSX component. Its return type 'Promise' is not a valid JSX element. Type 'Promise' is missing the following properties from type 'ReactElement<any, any>': type, props, key "

I read online that it should work when using TS-version 5.1.3+ and @types/react 18.2.8+ I'm running my project on TS-version 5.1.6 and @types/react 18.2.15

I place my async component here

###page.tsx

import Main from './main'

export default function Home() {
  return (
        <Main />
  )
}

and this the component I am importing

###main.tsx

import { getAllProjects, Project } from "./utils/db/projects"
import { Button }  from '@/components'

export default async function Main() {

    const projects: Project[] = await getAllProjects();
   
    return (
        <>
            <h1 className="text-4xl font-bold">
                {projects.length < 1 ? " Looks you don't have any projects yet." : 
                projects.length == 1 ? "Here is your project!" : 
                "Here are your projects!" } 
            </h1>
            <Button>Create new project</Button>

        </>
    )
}

getAllProjects(); fetches the projects from my database;

Upvotes: 0

Views: 474

Answers (1)

Sem Stassen
Sem Stassen

Reputation: 11

The typescript version being used was the one natively in VS-code. Which is an earlier version with no built-in support for the new next.js 13 features.

Upvotes: 1

Related Questions