类型错误：页面“...”有一个无效的“默认”导出：类型“...”在Next.js中无效

bpzcxfmw 于 2023-06-05 发布在其他

关注(0)|答案(2)|浏览(261)

我有一个功能组件的注册页面。我正在尝试为这个组件声明props，这样我就可以从另一个组件向它传递适当的值。这就是我正在做的

export default function SignupPage({mode = 'patient'} : {mode: 'patient' | 'doctor'}) {
 {/* CODE FOR SIGNUP PAGE HERE */}
}

如代码所示，我希望mode的默认值为patient。它应该始终是patient或doctor之一。
当我用npm run dev运行这段代码时，一切都很好。当我尝试使用npm run build构建时，我得到以下错误：

- 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.

我已经尝试了多种方法，比如用mode: 'patient' | 'doctor';声明interface和type。它总是给出相同的错误。
任何帮助和指导将不胜感激🙏🏼

next.js

来源：https://stackoverflow.com/questions/76404674/type-error-page-has-an-invalid-default-export-type-is-not-valid

2条答案

按热度按时间

edqdpe6u1#

我在代码沙箱中使用了您的代码，并运行了npm run build，成功构建了它，没有任何错误。问题出在其他地方，或者可能是您的配置。
https://codesandbox.io/p/sandbox/clever-mclaren-3112w6?file=%2Fapp%2Fpage.tsx%3A3%2C10

赞(0）回复(0）举报 2023-06-05

4zcjmb1e2#

正如您在doc上看到的，app目录中page.js的默认导出只能具有类似于以下内容的类型：

interface PageProps {
  params: { slug: string };
  searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {}

params和searchParams是您可以提供的唯一类型，它们将通过Next.js传递给您的组件。您不应该尝试在另一个组件中自己调用该页。
如果你想这样做，你应该把它转换成一个普通的组件，也许把它移动到自己的文件，并从那里导入到任何你想要的地方。

赞(0）回复(0）举报 2023-06-05

我来回答

类型错误：页面“...”有一个无效的“默认”导出：类型“...”在Next.js中无效

2条答案

相关问题

热门标签

最新问答