I am currently working with NextJS, TypeScript, and Fluent UI. To set up the app, I used the command
yarn create next-app --typescriptAfterwards, I incorporated Fluent UI into my project by running $ yarn add @fluentui/react.
So far, I have not made any other modifications to the setup. For guidance on using Fluent UI, I am referring to the official documentation.
This is an example of what my index.tsx file looks like:
import { DefaultButton, PrimaryButton } from "@fluentui/react";
export default function Home() {
function buttonClicked() {
alert("Clicked");
}
return (
<div>
<DefaultButton
text="Standard"
onClick={buttonClicked}
allowDisabledFocus
/>
<PrimaryButton text="Primary" onClick={buttonClicked} />
</div>
);
}
To launch the application, I use the command $ yarn dev.
Upon accessing the app in a browser using the link http://localhost:3000/, I see the buttons rendered but encounter the following errors in the console.
https://i.sstatic.net/caR2C.png
What could be causing these errors? Have I overlooked something? Any assistance would be greatly appreciated.