Type error: Page ... has an invalid "default" export: Type ... is not valid
Unanswered
Cuvier’s Dwarf Caiman posted this in #help-forum
Cuvier’s Dwarf CaimanOP
While deploying my nextjs app, I am facing an error for a page: app/donate/summary/page.tsx:
import React from "react";
import { format } from "date-fns";
import type { NextPage } from "next";
interface DonationReportProps {
donationData: {
id: number;
name: string;
email: string;
mobileNumber: string;
amount: number;
time: string;
};
}
const DonationReport: NextPage<DonationReportProps> = ({ donationData }) => {
const isoTime: any = donationData.time;
const localTime: string = format(
new Date(isoTime),
"dd MMMM yyyy, hh:mm:ss a"
);
return (
<div className="max-w-md mx-auto mt-8">
<h1 className="text-2xl font-bold mb-4">Donation Summary</h1>
<div className="bg-white shadow-md rounded-md p-4">
<p className="mb-2">
<span className="font-bold">ID:</span> {donationData.id}
</p>
<p className="mb-2">
<span className="font-bold">Name:</span> {donationData.name}
</p>
<p className="mb-2">
<span className="font-bold">Email:</span> {donationData.email}
</p>
<p className="mb-2">
<span className="font-bold">Mobile Number:</span>{" "}
{donationData.mobileNumber}
</p>
<p className="mb-2">
<span className="font-bold">Amount:</span> {donationData.amount}
</p>
{donationData.time && (
<p className="mb-2">
<span className="font-bold">Date & Time:</span> {localTime}
</p>
)}
</div>
</div>
);
};
export default DonationReport;
the error logs are:
Failed to compile.
app/donate/summary/page.tsx
Type error: Page "app/donate/summary/page.tsx" has an invalid "default" export:
Type "DonationReportProps" is not valid.
Error: Command "npm run build" exited with 1
import React from "react";
import { format } from "date-fns";
import type { NextPage } from "next";
interface DonationReportProps {
donationData: {
id: number;
name: string;
email: string;
mobileNumber: string;
amount: number;
time: string;
};
}
const DonationReport: NextPage<DonationReportProps> = ({ donationData }) => {
const isoTime: any = donationData.time;
const localTime: string = format(
new Date(isoTime),
"dd MMMM yyyy, hh:mm:ss a"
);
return (
<div className="max-w-md mx-auto mt-8">
<h1 className="text-2xl font-bold mb-4">Donation Summary</h1>
<div className="bg-white shadow-md rounded-md p-4">
<p className="mb-2">
<span className="font-bold">ID:</span> {donationData.id}
</p>
<p className="mb-2">
<span className="font-bold">Name:</span> {donationData.name}
</p>
<p className="mb-2">
<span className="font-bold">Email:</span> {donationData.email}
</p>
<p className="mb-2">
<span className="font-bold">Mobile Number:</span>{" "}
{donationData.mobileNumber}
</p>
<p className="mb-2">
<span className="font-bold">Amount:</span> {donationData.amount}
</p>
{donationData.time && (
<p className="mb-2">
<span className="font-bold">Date & Time:</span> {localTime}
</p>
)}
</div>
</div>
);
};
export default DonationReport;
the error logs are:
Failed to compile.
app/donate/summary/page.tsx
Type error: Page "app/donate/summary/page.tsx" has an invalid "default" export:
Type "DonationReportProps" is not valid.
Error: Command "npm run build" exited with 1
18 Replies
Cuvier’s Dwarf CaimanOP
first, it was like this:
const DonationReport: React.FC<DonationReportProps> = ({ donationData }) => {}
const DonationReport: React.FC<DonationReportProps> = ({ donationData }) => {}
then the same error occurred
its a page
it doesnt have those props
@DirtyCajunRice | AppDir its a page
Cuvier’s Dwarf CaimanOP
the error is saying:
Type error: Page "app/donate/summary/page.tsx" has an invalid "default" export:
Type "DonationReportProps" is not valid.
but why the Type is not valid, I am not getting that.
Type error: Page "app/donate/summary/page.tsx" has an invalid "default" export:
Type "DonationReportProps" is not valid.
but why the Type is not valid, I am not getting that.
this is the Type:
interface DonationReportProps {
donationData: {
id: number;
name: string;
email: string;
mobileNumber: string;
amount: number;
time: string;
};
}
interface DonationReportProps {
donationData: {
id: number;
name: string;
email: string;
mobileNumber: string;
amount: number;
time: string;
};
}
and params and search params
@DirtyCajunRice | AppDir a page only has children as a prop
Cuvier’s Dwarf CaimanOP
please explain this.
my page has children as a prop
const DonationReport = ({ donationData }: DonationReportProps) => {......}
my page has children as a prop
donationDataconst DonationReport = ({ donationData }: DonationReportProps) => {......}
pages only have 2 props
params. search params.
thats why its erroring
there is no such thing as a page with a donationData prop