Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Authenticator dependency causing an error #6287

Closed
4 tasks done
Vodolay opened this issue Jan 9, 2025 · 2 comments
Closed
4 tasks done

Authenticator dependency causing an error #6287

Vodolay opened this issue Jan 9, 2025 · 2 comments
Labels
pending-maintainer-response Issue is pending response from an Amplify UI maintainer

Comments

@Vodolay
Copy link

Vodolay commented Jan 9, 2025

Before creating a new issue, please confirm:

On which framework/platform are you having an issue?

Other

Which UI component?

Authenticator

How is your app built?

Next.js

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

No response

Please describe your bug.

When following the Quickstart the step of including the Authenticator component in the layout fails. The problem is that one dependency package cannot import a hook from another.

What's the expected behaviour?

The Quickstart should work.

Help us reproduce the bug!

Just follow the Quickstart without any modification.

Code Snippet

// Put your code below this line.
import type { Metadata } from "next";
import { Inter } from "next/font/google";
import "./app.css";

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

const inter = Inter({ subsets: ["latin"] });

export const metadata: Metadata = {
  title: "Create Next App",
  description: "Generated by create next app",
};

export default function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <html lang="en">
      <body className={inter.className}>
        <Authenticator>
          {children}
        </Authenticator>
      </body>
    </html>
  );
}

Console log output

./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

{
"name": "aws-amplify-gen2",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start",
"lint": "next lint"
},
"dependencies": {
"@aws-amplify/ui-react": "^6.5.5",
"aws-amplify": "^6.6.6",
"next": "^14.2.23",
"react": "^18",
"react-dom": "^18"
},
"devDependencies": {
"@aws-amplify/backend": "^1.5.1",
"@aws-amplify/backend-cli": "^1.3.0",
"@types/node": "^20",
"@types/react": "^18",
"@types/react-dom": "^18",
"aws-cdk": "^2",
"aws-cdk-lib": "^2",
"constructs": "^10.3.0",
"esbuild": "^0.23.1",
"tsx": "^4.19.0",
"typescript": "^5.6.2"
}
}
@github-actions github-actions bot added pending-triage Issue is pending triage pending-maintainer-response Issue is pending response from an Amplify UI maintainer labels Jan 9, 2025
@Vodolay
Copy link
Author

Vodolay commented Jan 9, 2025

OK. I figured it out. layout.tsx must be on the client. This is inconvenient given that I usually load text translations from json files on the server in layout.tsx. Can the Authenticator wrapper be deeper in the app?

@Vodolay Vodolay closed this as completed Jan 10, 2025
@github-actions github-actions bot removed pending-triage Issue is pending triage pending-maintainer-response Issue is pending response from an Amplify UI maintainer labels Jan 10, 2025
@Vodolay
Copy link
Author

Vodolay commented Jan 10, 2025

Closed.

@github-actions github-actions bot added the pending-maintainer-response Issue is pending response from an Amplify UI maintainer label Jan 10, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
pending-maintainer-response Issue is pending response from an Amplify UI maintainer
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@Vodolay