Fluent UI and NextJS errors

[Giuseppetm]

In the last few days I'm trying to convert my project made in React to NextJS.
(you can find the branch I'm working on here).

I had built it all with Fluent UI and Typescript, and I was hoping there was some decent documentation on how to get it all going but apparently I was daydreaming .. the only doc available is here, and it's basically a javascript file (where is the typescript one??) that doesn't work.

Using @fluentui/react package to import components literally breaks the entire application: there are several errors like:

⚠️ TypeError: Cannot read property 'semanticColors' of undefined
⚠️ TypeError: Cannot read property 'fonts' of undefined
⚠️ TypeError: Cannot read property 'disableGlobalClassNames' of undefined

The only workaround I found was using office-ui-fabric-react/lib-commonjs/ to import the Fluent UI components, but this thing is not updated and some components do not behave correctly.

A user has made available a typescript version for _document.tsx and _app.tsx but the problems are the same.
https://github.com/resir014/nextjs-fluentui-quickstart/blob/trunk/pages/_document.tsx

Do you have any suggestions? I would appreciate some help, I don't know what else to try. Thank you!

Packages version

"react": 17.0.2
"next": 12.2.5
"@fluentui/react": 8.30.1, (8.90.1 that is the latest doesn't work either)
"typescript": 4.3.2

Errors I encountered using @fluentui/react components import

[miroslavstastny]

Unfortunately your branch is not accessible.
The typescript version of _document.tsx and _app.tsx which you linked is for Fluent UI v7.

We definitely need to improve the documentation, the most up to date state of support (and _document.tsx) is described in: #11411 (comment).

I followed the instructions in wiki and the Next application renders (complaining about id mismatch and icons as mentioned in #11411 (comment)). Could you please provide us with repros (ideally codesandbox or minimal github repo).