Using AddressAutofill in React/Next.JS app does not work
starlight-akouri opened this issue · 10 comments
'AddressAutofill' cannot be used as a JSX component.
Its type 'ForwardRefExoticComponent<AddressAutofillProps & RefAttributes<unknown>>' is not a valid JSX element type.
Type 'ForwardRefExoticComponent<AddressAutofillProps & RefAttributes<unknown>>' is not assignable to type '(props: any, deprecatedLegacyContext?: any) => ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>> | null' is not assignable to type 'ReactNode'.
Type 'ReactElement<any, string | JSXElementConstructor<any>>' is not assignable to type 'ReactNode'.
Property 'children' is missing in type 'ReactElement<any, string | JSXElementConstructor<any>>' but required in type 'ReactPortal'.ts(2786)
to solve this problem all you do is
npm install @types/react
add this on the tsconfig.json
"paths": { "react": ["./node_modules/@types/react"], }
Have you tried my solution?
Have you tried my solution?
thank you it's fixed
I am also having this issue. Did exactly what you did above.
@sepehr500 is that help you or not?
@sepehr500 is that help you or not?
Unfortunately it didn't help
I was able to find a quick fix, was getting the same error trying to use the AddressAutofill component in a react/typescript project.
I believe because the AddressAutofill component doesn't have a type definition, typescript won't allow you to use it.
I created a declarations.d.ts
file in my /src folder and added :
declare module "@mapbox/search-js-react" { export const AddressAutofill: React.FC<any>; // Adjust types if more specific ones are available }
hopefully this helps anyone.