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.

[thb]

I'm using import { AddressAutofillRetrieveResponse } from "@mapbox/search-js-core"

Here is a sample code for the full example.

import { useState } from "react"
import { FormField, FormItem, FormLabel, FormControl, FormMessage } from "@/components/ui/form"
import { Input } from "@/components/ui/input"
import { AddressAutofill, AddressMinimap } from "@mapbox/search-js-react"
import { AddressAutofillRetrieveResponse } from "@mapbox/search-js-core"
import { useFormContext } from "react-hook-form"

const MAPBOX_TOKEN = import.meta.env.VITE_MAPBOX_TOKEN

export default function LocationFieldset() {
  const { control } = useFormContext()
  const [minimapFeature, setMinimapFeature] = useState<any>(null)

  function handleAutofillRetrieve(response: AddressAutofillRetrieveResponse) {
    console.log("onRetrieve :", response.features[0]);

    if (response.features && response.features.length > 0) {
      setMinimapFeature(response.features[0])
    }
  }

  return (
    <fieldset className="bg-white p-6 rounded-2xl border shadow-md space-y-4">
      <h2 className="text-xl text-blue-800 font-semibold">Localisation</h2>
      <FormField
        control={control}
        name="address"
        render={({ field }) => (
          <FormItem>
            <FormLabel>Adresse</FormLabel>
            <FormControl>
              <AddressAutofill
                accessToken={MAPBOX_TOKEN}
                onRetrieve={handleAutofillRetrieve}
              >
                <Input
                  placeholder="Entrez votre adresse"
                  autoComplete="address-line1 address-line2"
                  {...{
                    value: field.value,
                    onChange: field.onChange,
                    onBlur: field.onBlur,
                    name: field.name,
                  }}
                />
              </AddressAutofill>
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
      <div className="relative border rounded h-32 w-full lg:max-w-md md:max-w-md" style={{ display: minimapFeature ? "block" : "none" }}>
        <AddressMinimap
          feature={minimapFeature}
          satelliteToggle
          canAdjustMarker
          footer={true}
          accessToken={MAPBOX_TOKEN}
          show={!!minimapFeature}
        />
      </div>
    </fieldset>
  )
}

I think these components are outdated, the rendering is not great. You can easily recreate this feature with mapbox. Just type prompt "a simple address autofill and minimap with mapbox in react typescript" in v0.dev