1

I am using NextJS, TypeScript and Fluent UI. I have generated the app using yarn create next-app --typescript.

Later on I added Fluent UI using $ yarn add @fluentui/react command.

I have not added anything else. I am using (https://developer.microsoft.com/en-us/fluentui#/controls/web/button) guide for Fluent UI.

This is what my index.tsx file look 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>
  );
}

I run the app using $ yarn dev command.

When I open the app in browser using http://localhost:3000/, It displays the buttons but gives following errors in console.

enter image description here

What is the reason for that? Am I missing something? Can anyone please help?

newbie
  • 530
  • 1
  • 9
  • 36
  • Read this: https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing , the warning is a known issue and they are still investigating it. – Mic Fung Aug 06 '21 at 19:09
  • There are two different warnings. Are they both known issues? Is Fluent UI stable enough to be used in a production app for nextjs project? Please guide – newbie Aug 06 '21 at 20:00
  • 1
    dont know about inderOf warning. From fluent UI perspective, they claim they are ready and it works even has warnings. But from my observation, this warning or other related SSR issues exist since 2019 and they are still fixing. – Mic Fung Aug 07 '21 at 09:30

1 Answers1

0

add this in your _document.tsx, before your document function.

import { setRTL } from '@fluentui/react/lib/Utilities'
setRTL(true)

Depending on whether the dir property is specified on the html element (dir="rtl" will reverse everything), all components can render in either LTR or RTL. If you don't have control over how the html element is rendered, you can also utilize the setRTL API.

priya pathak
  • 1