Argument of type ‘ForwardRefExoticComponent<ImageProps & RefAttributes>’ is not assignable to parameter of type ‘ComponentType<ImageProps & RefAttributes>’.
I am facing this error when intergration with builder.io
Before i was built totally find but when i try to pnpm run build, then this happen till now.
All my components are wrapped with forwardRef
Please help, i was so upset for finding solutions
Hello @Brunotruong,
Welcome to the builder.io forum.
The error message you’re encountering is related to TypeScript and React. It suggests that there is a type mismatch between the expected type and the actual type being provided.
The forwardRef function is used to forward refs to a child component. When using it, you need to ensure that the types of the component you’re forwarding the ref to match the expected types. Here’s an example of how you might use forwardRef :
import React, { forwardRef, ForwardedRef } from 'react';
interface ImageProps {
// Your image component props
}
const Image = forwardRef((props: ImageProps, ref: ForwardedRef<HTMLImageElement>) => {
// Your image component implementation
return <img ref={ref} {...props} />;
});
export default Image;
Make sure that the ForwardedRef type is compatible with the type expected by the component. In this example, ForwardedRef<HTMLImageElement> indicates that the forwarded ref is expected to be a ref for an HTMLImageElement.
If you’re still having issues, you may need to check where you’re using the component and make sure the types match. For example, if you’re using the Image component somewhere in your code, ensure that you’re providing the correct ref types:
const myRef = useRef<HTMLImageElement>(null);
// ...
<Image ref={myRef} />
If the suggestions provided above do not resolve the issue, kindly share the complete code with us. This will enable us to offer you more accurate and targeted assistance.
Thank you!
Hey Sharma, thank you for you reply, i will get back to you if i have some new result, for right now i am moving forward to next task, this already put in backlog. Btw, thank you for your effort