[error] Server side rendering and browserless testing doc #17832

hadnet · 2021-04-15T20:00:53Z

hadnet
Apr 15, 2021

I'm trying to update from 8.x.x-beta.x to 8.x.x but this line doesn't work:

import { Stylesheet, InjectionMode, resetIds } from '@fluentui/react/lib/Utilities';

throws an error telling me Stylesheet, InjectionMode don't exist in that package.

However, using the old line below works:

import {Stylesheet, InjectionMode} from '@fluentui/merge-styles';
import {resetIds} from '@fluentui/utilities';

What am I doing wrong? I'm migrating to this packages:

    "@fluentui/merge-styles": "^8.0.3",
    "@fluentui/react": "^8.10.1",
    "@fluentui/react-button": "^9.0.0-alpha.22",
    "@fluentui/react-cards": "^1.0.0-beta.82",
    "@fluentui/react-icons": "^1.1.118",
    "@fluentui/utilities": "^8.0.4",

Answered by thekeviv

Jul 13, 2021

Here's the full file I use:

import Document, {
  DocumentContext,
  Head,
  Html,
  Main,
  NextScript,
} from "next/document";
// Fluent UI React 8+
import { Stylesheet, InjectionMode, resetIds } from "@fluentui/react";
// Fluent UI React (Fabric) 7 or earlier
// import { Stylesheet, InjectionMode, resetIds } from 'office-ui-fabric-react/lib/Utilities';

// Do this in file scope to initialize the stylesheet before Fluent UI React components are imported.
const stylesheet = Stylesheet.getInstance();

// Set the config.
stylesheet.setConfig({
  injectionMode: InjectionMode.none,
  namespace: "server",
});

// Now set up the document, and just reset the stylesheet.
export default class MyDo…

View full answer

thekeviv · 2021-07-13T07:46:18Z

thekeviv
Jul 13, 2021

Here's the full file I use:

import Document, {
  DocumentContext,
  Head,
  Html,
  Main,
  NextScript,
} from "next/document";
// Fluent UI React 8+
import { Stylesheet, InjectionMode, resetIds } from "@fluentui/react";
// Fluent UI React (Fabric) 7 or earlier
// import { Stylesheet, InjectionMode, resetIds } from 'office-ui-fabric-react/lib/Utilities';

// Do this in file scope to initialize the stylesheet before Fluent UI React components are imported.
const stylesheet = Stylesheet.getInstance();

// Set the config.
stylesheet.setConfig({
  injectionMode: InjectionMode.none,
  namespace: "server",
});

// Now set up the document, and just reset the stylesheet.
export default class MyDocument extends Document {
  static async getInitialProps(ctx: DocumentContext) {
    stylesheet.reset();
    resetIds();
    const initialProps = await Document.getInitialProps(ctx);

    return {
      ...initialProps,
      styles: [
        initialProps.styles,
        <style
          key="fluentui-css"
          dangerouslySetInnerHTML={{ __html: stylesheet.getRules(true) }}
        />,
      ],
    };
  }

  render(): JSX.Element {
    return (
      <Html lang="pt-BR">
        <Head>
          <meta charSet="utf-8" />
        </Head>

        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

I needed the following dependencies:

fluentui/merge-styles: ^8.1.3
fluentui/react: ^8.22.3

There's some docs on this here:
https://github.com/microsoft/fluentui/wiki/Server-side-rendering-and-browserless-testing

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[error] Server side rendering and browserless testing doc #17832

{{title}}

Replies: 1 comment

{{title}}

Select a reply

[error] Server side rendering and browserless testing doc #17832

hadnet Apr 15, 2021

Replies: 1 comment

thekeviv Jul 13, 2021

hadnet
Apr 15, 2021

thekeviv
Jul 13, 2021