Error de importación intentada: "useForm" no se exporta desde "react-hook-form".

useForm' no se exporta desde 'react-hook-form

TLDR

Para arreglar Error de importación intentada: 'useForm' no se exporta desde 'react-hook-form' (importado como 'useForm') agrega 'use client' a tu componente cliente contenedor así:

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

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

Arreglando "Error de importación intentada: 'useForm' no se exporta desde 'react-hook-form' (importado como 'useForm')".

Cuando usas AWS Amplify, Amplify UI y NextJS puedes encontrarte con el siguiente 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').

Está relacionado con tener que usar un componente del lado del cliente en un componente del servidor, como el Authenticator de la librería Amplify UI.

Para resolver el error agrega 'use client' a tu componente cliente contenedor, como se explica en la documentación de NextJS, cuando usas paquetes de terceros y proveedores que usan características de cliente solamente de ReactJS como useState y no implementan la directiva 'use client'.

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

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

Artículos relacionados

  • No se puede resolver amplify_outputs.json

    Para corregir el error de compilación "no se puede resolver amplify_outputs.json", añade npx ampx pipeline-deploy --branch $AWS_BRANCH --app-id $AWS_APP_ID a la configuración de compilación y adjunta la política AdministratorAccess-Amplify

  • Actualización asincrónica de elementos relacionados con AWS DataStore en una aplicación web Next.js.

    Al trabajar con AWS DataStore tienes que lidiar con operaciones async/await. Actualizar una lista de elementos cuando el orden de ejecución de las operaciones asincrónicas no es obligatorio es viable hacerlo con Promise.all() y map. Actualizar elementos relacionados, donde el resultado de la promesa del elemento anterior es necesario como entrada para el siguiente elemento, se puede lograr con la declaración for await...of.

  • ¿Cómo usar un dominio personalizado registrado con AWS Route 53 en una aplicación web Next.js implementada en Vercel?

    Actualiza los servidores de nombres del dominio de AWS Route 53 o, los tipos de registros A y CNAME con los valores proporcionados por Vercel bajo ProjectName / Settings / Domains después de que agregaste un dominio al proyecto. Mostrará la información necesaria para configurar midominio.com y redirigir a www.midominio.com o viceversa. Después de que intentaste agregar el dominio a tu proyecto sin éxito, esa información también se enviará a tu correo electrónico explicando qué hacer. Vercel te permite configurar registros A (recomendado) y CNAME.