Figma Amplify UI Builder export to Gen 2 NextJS App Router Starter all

sivaprakash-mu commented 5 months ago

Before creating a new issue, please confirm:

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

On which framework/platform are you having an issue?

React

Which UI component?

Primitive components

How is your app built?

Next.js Gen2 Template

What browsers are you seeing the problem on?

Chrome

Which region are you seeing the problem in?

ca-Central-1

Please describe your bug.

I installed my Next.JS (app router) starter app, from the Amplify Gen2 template (todo), and then I subscribed to figma dev mode, and downloaded the UI components from AWS Amplify UI kit.

Then I added the UI components to the app in the ui-components folder in the project folder. Then I added a navigation bar, using the Amplify UI kit template. Then I get a runtime error in the LogoWithText.jsx component.

1 of 1 unhandled error Next.js (13.5.4) is outdated (learn more)

Unhandled Runtime Error TypeError: (0 , _aws_amplify_ui_react_internal__WEBPACK_IMPORTED_MODULE_2__.getOverridesFromVariants) is not a function

Source ui-components/LogoWithText.jsx (311:29) @ variants

309 | 310 | const overrides = mergeVariantsAndOverrides(

311 | getOverridesFromVariants(variants, props), | ^ 312 | overridesProp || {} 313 | ); 314 | Show collapsed frames

What's the expected behaviour?

The app should load with the Navigator that I have added.

Help us reproduce the bug!

I installed my Next.JS (app router) starter app, from the Amplify Gen2 template (todo), and then I subscribed to figma dev mode, and downloaded the UI components from AWS Amplify UI kit.

Then I added the UI components to the app in the ui-components folder in the project folder. Then I added a navigation bar, using the Amplify UI kit template. Then I get a runtime error in the LogoWithText.jsx component.

Code Snippet

// Put your code below this line.

Added Navigation in the layout.tsx file

import type { Metadata } from "next"; import { Inter } from "next/font/google"; import "./app.css"; import Navigation from "@/components/navigation/Navigation";

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 (

{children}

); }

Navigation.jsx file

"use client" import { Flex, Text, Image } from '@aws-amplify/ui-react'; import { LogoWithText, MyIcon } from '@/ui-components'; export default function Navigation() { return ( <Flex gap="40px" direction="row" width="1440px" justifyContent="center" alignItems="center" position="relative" boxShadow="0px 2px 6px rgba(0.05098039284348488, 0.10196078568696976, 0.14901961386203766, 0.15000000596046448)" padding="24px 32px 24px 32px" backgroundColor="rgba(255,255,255,1)"

<LogoWithText color="brand" /> <Flex gap="40px" direction="row" justifyContent="flex-start" alignItems="center" grow="1" shrink="1" basis="0" position="relative"

<Text fontFamily="Inter" fontSize="16px" fontWeight="400" color="rgba(92,102,112,1)" lineHeight="24px" textAlign="left" display="block" shrink="0" position="relative" whiteSpace="pre-wrap"

Dashboard <Text fontFamily="Inter" fontSize="16px" fontWeight="400" color="rgba(92,102,112,1)" lineHeight="24px" textAlign="left" display="block" shrink="0" position="relative" whiteSpace="pre-wrap"

Jobs <Text fontFamily="Inter" fontSize="16px" fontWeight="400" color="rgba(92,102,112,1)" lineHeight="24px" textAlign="left" display="block" shrink="0" position="relative" whiteSpace="pre-wrap"

Applicants <Text fontFamily="Inter" fontSize="16px" fontWeight="400" color="rgba(92,102,112,1)" lineHeight="24px" textAlign="left" display="block" shrink="0" position="relative" whiteSpace="pre-wrap"

Company <Flex gap="32px" direction="row" justifyContent="flex-end" alignItems="center" grow="1" shrink="1" basis="0" position="relative"

<MyIcon type="notification" /> <Image width="45px" height="45px" display="block" shrink="0" position="relative" borderRadius="160px" objectFit="cover" alt="" /> ) }

Console log output

NA

Additional information and screenshots

No response

sivaprakash-mu commented 5 months ago

I've upgraded my nextjs to the latest version now, but I still get this error

zchenwei commented 5 months ago

@sivaprakash-mu , thanks for bringing this up and we are looking into the issue.

zchenwei commented 5 months ago

The UI builder team is aware of it and working on the issue. We will transfer the issue.

zchenwei commented 5 months ago

Hi @sivaprakash-mu, the Figma plugin has been updated. You should no longer encounter this error after you downloading the components once again via the plugin. Could you please confirm if that works for you?

sivaprakash-mu commented 5 months ago

Hello @zchenwei, thank you very much. This works now! The error does not happen anymore.

Cheers, Prakash.

github-actions[bot] commented 5 months ago

⚠️COMMENT VISIBILITY WARNING⚠️

Comments on closed issues are hard for our team to see. If you need more assistance, please open a new issue that references this one. If you wish to keep having a conversation with other community members under this issue feel free to do so.

aws-amplify / amplify-studio