Skip to content

Changed layout.tsx to client-side component#61

Open
osawa-koki wants to merge 2 commits into
aws-samples:mainfrom
osawa-koki:main
Open

Changed layout.tsx to client-side component#61
osawa-koki wants to merge 2 commits into
aws-samples:mainfrom
osawa-koki:main

Conversation

@osawa-koki

Copy link
Copy Markdown

Issue #, if available:

When following the instructions at https://docs.amplify.aws/nextjs/start/quickstart/nextjs-app-router-client-components/, the following error occurs:

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

The cause is that the component, which is intended to be added in the tutorial, needs to be a client-side component, while the current layout.tsx is defined as a server-side component.
In the tutorial code, the "use client"; directive is specified, but the code of this repo is not.

Description of changes:

  • put "use client"; at the top of layout.tsx.
  • remove metadata exports.
    • metadata exports is not needed when it's client-side component.

By submitting this pull request, I confirm that you can use, modify, copy, and redistribute this contribution, under the terms of your choice.

osawa-koki added a commit to osawa-koki/amplify-gen2-with-cypress that referenced this pull request Oct 27, 2024
osawa-koki added a commit to osawa-koki/amplify-gen2-with-cypress that referenced this pull request Oct 27, 2024
@Raghavendarlokineni

Copy link
Copy Markdown

Thanks @osawa-koki you saved my day. Was struggling with this issue for a long time.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants