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

[chandragaajula]

I have a brand new project in React that I wish to deploy to Amplify and I see the following error. I have been following the instructions in https://ui.docs.amplify.aws/react/connected-components/authenticator:

 ⨯ ./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
./src/app/page.tsx
 ⚠ Fast Refresh had to perform a full reload due to a runtime error.

Code in pages.tsx

import React from 'react';
import { Amplify } from 'aws-amplify';

import { Authenticator } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';

import awsExports from './aws-exports';
Amplify.configure(awsExports);

export default function App() {
  return (
    <Authenticator>
      {({ signOut, user }) => (
        <main>
          <h1>Hello {user.username}</h1>
          <button onClick={signOut}>Sign out</button>
        </main>
      )}
    </Authenticator>
  );
}

My package.json

{
  "name": "app-ui",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "eslint ./ --ignore-path .gitignore",
    "lint:fix": "npm run lint -- --fix",
    "format": "prettier --write \"{,!(node_modules)/**/}*.js\""
  },
  "dependencies": {
    "@aws-amplify/ui-react": "^6.1.6",
    "aws-amplify": "^6.0.21",
    "final-form": "^4.20.10",
    "flowbite-react": "^0.7.3",
    "next": "14.1.3",
    "react": "^18",
    "react-dom": "^18",
    "react-hook-form": "^7.51.1"
  },
  "devDependencies": {
    "@imaginary-cloud/eslint-config-react": "^2.0.1",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-dom": "^18",
    "autoprefixer": "^10.0.1",
    "eslint": "^8.57.0",
    "eslint-config-airbnb": "^19.0.4",
    "eslint-config-next": "14.1.3",
    "eslint-config-prettier": "^8.10.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-jest": "^26.9.0",
    "eslint-plugin-jsx-a11y": "^6.8.0",
    "eslint-plugin-prettier": "^4.2.1",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "postcss": "^8",
    "prettier": "^3.2.5",
    "prettier-plugin-tailwindcss": "^0.5.12",
    "tailwindcss": "^3.4.1",
    "typescript": "^5"
  },
  "prettier": "@imaginary-cloud/prettier-config"
}

[Haschikeks]

I guess you use react-hook-form somewhere else in your app, but could you check if it runs, if you remove react-hook-form from your dependencies?

Also check if there are multiple react-hook-form packages installed:
yarn why react-hook-form
npm explain react-hook-form

[chandragaajula]

~npm explain react-hook-form
[email protected]
node_modules/react-hook-form
  react-hook-form@"^7.43.5" from @aws-amplify/[email protected]
  node_modules/@aws-amplify/ui-react-core
    @aws-amplify/ui-react-core@"^3.0.12" from the root project
    @aws-amplify/ui-react-core@"3.0.12" from @aws-amplify/[email protected]
    node_modules/@aws-amplify/ui-react
      @aws-amplify/ui-react@"^6.1.6" from the root project

[Haschikeks]

do you use the "Pages Router" or "App Router" from next?

If you use the "App Router" you need to add "'use client';" at the top of your file.

[chandragaajula]

I have Page.tsx in my src directory.

[Haschikeks]

can you add "'use client';" at the top of your file?

[chandragaajula]

Got a resolution in another thread -> Wrap your Authenticator in a Client Component with 'use client'