Bug: NextJS Amplify Starter Tutorial breaks when implementing login UI

[el-zoltan]

Describe the bug
6. Implement login UI

The above step seems to be breaking now.

To Reproduce
Steps to reproduce the behavior:

1. When implementing the login UI
2. error: 'useForm' is not exported from 'react-hook-form' (imported as 'useForm')

Expected behavior
I expect to be able to follow along with a tutorial without it breaking.

Screenshots

Desktop (please complete the following information):

• OS: Mac
• Browser: Arc
• Version: 1.78.1

Smartphone (please complete the following information):

• N/A

Additional context
One option for a simple fix is to "use client" and not export metadata from layout.tsx: react-hook-form/react-hook-form#11284

[rasderty01]

You can also create an AuthProvider component and mark it as a client and then wrap the children in layout.tsx with the component. See code below

`"use client";
import { Authenticator } from "@aws-amplify/ui-react";

export default function AuthProvider({
children,
}: {
children: React.ReactNode;
}) {
return {children};
}
`

[el-zoltan]

Yeah, that's essentially what I ended up doing. Still, I think it might be worthwhile to update the tutorial, no?

[rasderty01]

I totally agree with you @el-zoltan . At least, have a workaround or just say it needs to be wrapped in a provider.