Attempted import error: 'useForm' is not exported from 'react-hook-form'.

useForm' is not exported from 'react-hook-form

TLDR

To fix Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm') add 'use client' to your client component wrapper like:

'use client'
import { Authenticator } from '@aws-amplify/ui-react'

export function AuthenticatorClient({ children }) {
  return <Authenticator>{({ signOut, user }) => <>{children}</>}</Authenticator>
}

Fixing "Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm')".

When using AWS Amplify, Amplify UI and NextJS you may encounter the following error:

./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
Attempted import error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm').

It is realted to having to use a client side component in a server component, like the Authenticator from the Amplify UI library.

To solve the error add 'use client' to your client component wrapper, as explained in the NextJS documentation, when using third party packages and providers that use ReactJS client-only features like useState and don't implement the 'use client' directive.

'use client'
import { Authenticator } from '@aws-amplify/ui-react'

export function AuthenticatorClient({ children }) {
  return <Authenticator>{({ signOut, user }) => <>{children}</>}</Authenticator>
}

Related articles

  • Can't resolve amplify_outputs.json

    To fix the can't resolve amplify_outputs.json build error add npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID1 to the build settings and attach the AdministratorAccess-Amplify policy

  • Asynchronous update of related items with AWS DataStore in a Next.js web app.

    When working with AWS DataStore you have to deal with async/await operations. Updating a list of items when the order of async operations execution is not mandatory is viable to do with Promise.all() and map. Updating related items, where the promise result from the previous item is needed as input for the next item, can be achieved with the for await...of statement.

  • How to use a custom domain registered with AWS Route 53 in a Next.js web app deployed to Vercel.

    Update the AWS Route 53 domain’s nameservers or, A and CNAME record types with the values provided by Vercel under ProjectName / Settings / Domains after you added a domain to the project. It will show the info needed to configure greatdomain.com and redirect to www.greatdomain.com or vice versa. After you tried to add the domain to your project unsuccessfully that information will also be sent to your email explaining what to do. Vercel allows you to configure A (recommended) and CNAME records.