typescriptnext.jsvercel

Type Error on Vercel Deployment for React.FC with Async Function


Problem

I'm encountering a type error when deploying my Next.js application to Vercel. The error message is as follows:

Type error: Type ' ({ params }: DashboardPageProps) = Promise' is not assignable to type 'FC<.DashboardPageProps>'

Type 'Promise‹Element>' is not assignable to type 'ReactElement<any, any>

Context

I have a page component defined in ./app/(dashboard)/[storeId]/(routes)/page.tsx. The component is intended to fetch some data asynchronously and render it. However, I'm running into this type error during the deployment process.

Code Snippet

Here’s the relevant code from my page.tsx file:


// imports

interface DashboardPageProps {
    params: { storeId: string }
}

const DashboardPage: React.FC<DashboardPageProps> = async ({
    params
}) => {
const totalRevenue = await getTotalRevenue(params.storeId);
    const salesCount = await getSalesCount(params.storeId);
    const stockCount = await getStockCount(params.storeId);
    const graphRevenue = await getGraphRevenue(params.storeId)

    return (
     //content
    )

Environments

Nodejs Version: 21.0

Repository: Github Repository Link


Solution

  • Type React.FC is used with ordinary (client) React components, in your code DashboardPage seem to be server component (returning promise) and thus isn't compatible with React.FC. To make error go away you just need to remove React.FC