I'm trying to code along to this React GraphQL TypeScript tutorial
Goal: Basically the HTML element type should be set to be the element 'Textarea' if the default variable: 'textarea' = true, and set to element 'Input' if variable:'textarea' = false.
Currently I'm at minute 6:05:28 and I'm stuck with the following error which does not appear in the video, I'm not sure why. I realised this doesn't really affect anything (the thing still works) but its showing a red underline error which is rather annoying:
Type 'ComponentWithAs<"textarea", TextareaProps>' is not assignable to type 'ComponentWithAs<"input", InputProps>'.
Types of parameters 'props' and 'props' are incompatible.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'MergeWithAs<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, any, TextareaProps, any>'.
Type 'MergeWithAs<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, any, InputProps, any>' is not assignable to type 'OmitCommonProps<DetailedHTMLProps<TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, keyof TextareaProps>'.
Types of property 'ref' are incompatible.
Type 'LegacyRef<HTMLInputElement> | undefined' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type 'LegacyRef<HTMLTextAreaElement> | undefined'.
Type '(instance: HTMLInputElement | null) => void' is not assignable to type '(instance: HTMLTextAreaElement | null) => void'.
Types of parameters 'instance' and 'instance' are incompatible.
Type 'HTMLTextAreaElement | null' is not assignable to type 'HTMLInputElement | null'.
Type 'HTMLTextAreaElement' is missing the following properties from type 'HTMLInputElement': accept, align, alt, capture, and 26 more.The line giving error is: InputOrTextarea being highlighted in red with the above error
InputOrTextarea = Textarea;The full code is:
type InputFieldProps = InputHTMLAttributes<HTMLInputElement> & { label: string; name: string; textarea?: boolean;
};
export const InputField: React.FC<InputFieldProps> = ({ label, textarea, size: _, ...props
}) => { let InputOrTextarea = Input; if (textarea) { InputOrTextarea = Textarea; } const [field, {error, }] = useField(props); return ( <FormControl isInvalid = {!!error}> <FormLabel htmlFor={field.name}>{label}</FormLabel> <InputOrTextarea {...field} {...props} id = {field.name} placeholder={props.placeholder}/> {error ? <FormErrorMessage>{error}</FormErrorMessage> : null} </FormControl> );
}2 Answers
For you or anyone else:
I had the same issue and I was watching the same video. You need to change the import from '@chakra-ui/react' to '@chakra-ui/core'.
I was using '@chakra-ui/core' and it gave me an error. As soon I install 'yarn add @chakra-ui/core @emotion/core @emotion/styled emotion-theming' and I used the core import, the error is gone.
You could try forcing the type on InputOrTextarea to allow an input or textarea to be assigned to it. For example:
let InputOrTextarea: HTMLInputElement | HTMLTextAreaElement | null = Input; if (textarea) { InputOrTextarea = Textarea; }
