Using AddressAutofill in React/Next.JS app does not work

[starlight-akouri]

'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)

[galihpermana29]

to solve this problem all you do is

npm install @types/react

add this on the tsconfig.json

"paths": { "react": ["./node_modules/@types/react"], }

[thomaslemoine]

Hi, I have the same error with vitejs, ts, react

[galihpermana29]

Have you tried my solution?

[thomaslemoine]

Have you tried my solution?

thank you it's fixed

[NateDawg90]

This is also not working for me. My app is Next/React/TS. Error: My tsconfig, and package.json respectively:

[galihpermana29]

my tsconfig.json

package.json

I've tried on couple project and it works to me

[sepehr500]

I am also having this issue. Did exactly what you did above.

[galihsynergy]

@sepehr500 is that help you or not?

[sepehr500]

@sepehr500 is that help you or not?

Unfortunately it didn't help

[Marquessmalley]

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.