Ошибка типа: страница "..." имеет недопустимый экспорт "по умолчанию": тип "..." недействителен в Next.js
У меня есть функциональный компонент для страницы регистрации. Я пытаюсь объявить реквизиты для этого компонента, чтобы передать ему соответствующие значения из другого компонента. Вот что я делаю:
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.
Я пробовал несколько вещей, таких как объявление interface и type с mode: 'patient' | 'doctor';. Всегда выдает одну и ту же ошибку.
Любая помощь и руководство будут высоко оценены 🙏🏼
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Как вы можете прочитать в документе , экспорт по умолчанию page.tsx в каталог app может иметь только тип, похожий на:
interface PageProps {
params: { slug: string };
searchParams: { [key: string]: string | string[] | undefined };
}
export default function Page({ params, searchParams }: PageProps) {
// ...
}
params и searchParams — это единственные типы, которые вы можете указать, и они будут переданы вашему компоненту с помощью Next.js. Вы не должны пытаться сами вызывать страницу в другом компоненте.
Если вы хотите этого, вы должны преобразовать его в обычный компонент и, возможно, переместить его в отдельный файл и импортировать оттуда, куда хотите.
Рад, что смог помочь! Да, в этом случае может иметь смысл строка параметра запроса.
Цените помощь! Параметры запроса работали отлично :)
Это действительно полезно! Если я хочу, чтобы что-то вроде переключателя в
page.tsxменялось в зависимости от того, с какой страницы они пришли, что бы вы порекомендовали? Будут ли параметры запроса в URL хорошим выбором?