Строка не присвоена типу Никогда ошибка в NextJs
'use client'
import { FieldErrors, FieldValues, UseFormRegister } from "react-hook-form";
import { BiDollar } from "react-icons/bi";
interface InputProps {
id: string;
label: string;
type?: string;
disabled?: boolean;
formatPrice?: boolean;
required: boolean;
register: UseFormRegister<FieldValues>;
errors: FieldErrors;
}
const Input: React.FC<InputProps> = ({
id,
label,
type = 'text',
disabled,
formatPrice,
required,
register,
errors
}) => {
return (
<div className = "w-full relative">
{formatPrice && (
<BiDollar
size = {24}
className = "text-neutral-700
absolute
top-5
left-2
"
/>
)}
<input
id = {id}
disabled = {disabled}
{...register(id, { required })}
placeholder = ""
type = {type}
className = {`
peer
w-full
p-4
pt-6
font-light
bg-white border-2
rounded-md
outline-none
transition
disabled:opacity-70
disabled:cursor-not-allowed
${formatPrice ? 'pl-9' : 'pl-4'}
${errors[id] ? 'border-rose-500' : 'border-neutral-300'}
${errors[id] ? 'focus:border-rose-500' : 'focus:border-neutral-300'}`
}
/>
<label
className = {
`
absolute
text-base
duration-150
transform
-translate-y-3
top-5
origin-[0]
${formatPrice ? 'left-9' : 'left-4'}
peer-placeholder-shown:scale-100'
peer-placeholder-shown:translate-y-0
peer-focus:scale-75
peer-focus:-translate-y-4
${errors[id] ? 'text-rose-500' : 'text-zinc-400'}
`
}
>{label}</label>
</div>
)
}
export default Input;
Тип «OmitwithTag<InputProps, keyof PageProps, «default»>» не удовлетворяет ограничению «{[x:string]: никогда;}».
Свойство «id» несовместимо с подписью индекса. Тип «строка» не может быть присвоен типу «никогда».
Ошибка типа: страница «app/comComponents/Input/page.tsx» имеет недопустимый экспорт «по умолчанию»: Тип «InputProps» недействителен.
Примечание. На локальном хосте работает нормально, во время сборки выдает ошибку.
Ответы 1
Имя файла app/components/Input/page.tsx зарезервировано в Next.js для целей маршрутизации. Например, page.{js,jsx,ts,tsx} в каталоге приложения автоматически генерирует маршрут. В этом случае будет создан маршрут /components/Input, что, скорее всего, непреднамеренно.
Поскольку это зарезервированный файл Next.js, Next.js ожидает, что вы экспортируете только некоторые конкретные экспортированные данные, например: компонент по умолчанию, runtime, revalidate, dynamic и т. д.
Экспорт по умолчанию должен представлять собой компонент реагирования, который принимает реквизиты { params, searchParams }. В вашем случае он принимает InputProps, что недопустимо.
Я знаю, что вы хотите сделать компонент многократного использования, а не маршрут. поэтому вы должны переименовать этот файл в незарезервированное имя. Например, назовите его Input.tsx или Input/index.tsx, а не page, layout, route, default, template, not-found.
Лишние файлы (например, компоненты) лучше переместить за пределы каталога app, поскольку он отвечает только за маршрутизацию.
Вместо этой структуры:
.
└── app
├── components
│ └── Input
│ └── page.tsx
├── login
│ └── page.tsx
└── register
└── page.tsx
Сделайте это так:
.
├── app
│ ├── login
│ │ └── page.tsx
│ └── register
│ └── page.tsx
└── components
└── Input
└── page.tsx
чтобы избежать подобных конфликтов в будущем
100% работает, спасибо, брат 👍