英文:
Type error: Page "..." has an invalid "default" export: Type "..." is not valid in Next.js
问题
export default function SignupPage({ mode = 'patient' }: { mode: 'patient' | 'doctor' }) {
{/* SIGNUP页面的代码在这里 */}
}
英文:
I've got a functional component for the Signup page. I'm trying to declare props for this component so I can pass appropriate values to it from another component. This is what I'm doing:
export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
{/* CODE FOR SIGNUP PAGE HERE */}
}
As the code shows, I want the default value of mode to be patient. It should always be one of either patient or doctor.
When I'm running this code with npm run dev, everything works fine. The minute I try to build with npm run build, I get the following error:
- info Linting and checking validity of types ...Failed to compile.
app/signup/page.tsx
Type error: Page "app/signup/page.tsx" has an invalid "default" export:
Type "{ mode: "patient" | "doctor"; }" is not valid.
I've tried multiple things like declaring an interface and type with mode: 'patient' | 'doctor'; as well. It always gives the same error.
Any help and guidance will be highly appreciated 🙏🏼
答案1
得分: 4
根据文档，位于app目录中的page.tsx的默认导出只能有类似于以下的类型：
interface PageProps {
params: { slug: string };
searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
// ...
}
params和searchParams是唯一可提供的类型，Next.js会将它们传递给您的组件。您不应该尝试在另一个组件中调用页面。
如果您希望这样做，您应该将其转换为普通组件，可能将其移到自己的文件中，并从那里导入它。
英文:
As you can read on the doc, the default export of a page.tsx in the app directory can only have a type similar to:
interface PageProps {
params: { slug: string };
searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
// ...
}
params and searchParams are the only type you can provide, and those will be passed to your component by Next.js. You shouldn't be trying to call the page yourself in another component.
If you want that, you should transform it to a normal component and maybe move it to its own file and import it from there wherever you want.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论