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

[sivaprakash-mu]

Before creating a new issue, please confirm:

• I have searched for duplicate or closed issues and discussions.
• I have tried disabling all browser extensions or using a different browser
• I have tried deleting the node_modules folder and reinstalling my dependencies
• 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 (




Dashboard


Jobs


Applicants


Company







)
}

Console log output

NA

Additional information and screenshots

No response

[sivaprakash-mu]

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

[zchenwei]

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

[zchenwei]

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

[zchenwei]

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]

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

Cheers,
Prakash.

[github-actions]

⚠️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.