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

[pontus-devoteam]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• I have read the guide for submitting bug reports.

On which framework/platform are you having an issue?

React

Which UI component?

Authenticator

How is your app built?

Next.js

What browsers are you seeing the problem on?

No response

Which region are you seeing the problem in?

No response

Please describe your bug.

Followed your guide:
https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/

And tried to add
`

{children}

`

Build gave me the result that I shared below.

What's the expected behaviour?

To generate a login/register form.

Help us reproduce the bug!

NPM 0.9.2
Node v22.13.1

Code Snippet

// Put your code below this line.

Console log output

✓ Starting...
✓ Ready in 2.4s
(node:17202) [DEP0040] DeprecationWarning: The punycode module is deprecated. Please use a userland alternative instead.
(Use node --trace-deprecation ... to show where the warning was created)
○ Compiling / ...
⨯ ./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').

Import trace for requested module:
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
./node_modules/@aws-amplify/ui-react-core/dist/esm/index.mjs
./node_modules/@aws-amplify/ui-react/dist/esm/index.mjs
./app/layout.tsx
⨯ ./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').

Import trace for requested module:
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
./node_modules/@aws-amplify/ui-react-core/dist/esm/index.mjs
./node_modules/@aws-amplify/ui-react/dist/esm/index.mjs
./app/layout.tsx
⨯ ./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').

Import trace for requested module:
./node_modules/@aws-amplify/ui-react-core/dist/esm/components/FormCore/FormProvider.mjs
./node_modules/@aws-amplify/ui-react-core/dist/esm/index.mjs
./node_modules/@aws-amplify/ui-react/dist/esm/index.mjs
./app/layout.tsx

Additional information and screenshots

No response

[cwomack]

Hello, @pontus-devoteam and thanks for opening this issue. Can you verify if you're importing and using use client as seen in this section of the docs? I believe that should resolve the error that you're experiencing.