Next.js 12 and React 18 `getCSSText` not rendering styles SSR #863

Kinbaum · 2021-10-28T12:45:42Z

Bug report

Describe the bug

After creating a Next.js 12 application with React 18 and a basic Stitches config, the getCSSText function does not collect styles from the page during SSR, which causes a FOUC.

To Reproduce

Steps to reproduce the behavior:

package.json

{
    "scripts": {
        "dev": "next dev",
        "build": "next build",
        "start": "next start"
    },
    "dependencies": {
        "@radix-ui/colors": "^0.1.7",
        "@stitches/react": "^1.2.5",
        "next": "^12.0.2-canary.2",
        "react": "^18.0.0-alpha-6c3dcc7a4-20211027",
        "react-dom": "^18.0.0-alpha-6c3dcc7a4-20211027"
    },
    "devDependencies": {
        "@types/react": "17.0.33",
        "@typescript-eslint/eslint-plugin": "^5.2.0",
        "@typescript-eslint/parser": "^5.2.0",
        "eslint": "<8.0.0",
        "eslint-config-next": "^12.0.1",
        "typescript": "4.4.4"
    }
}

next.config.js

module.exports = {
    experimental: {
        reactRoot: true,
        concurrentFeatures: true,
        serverComponents: true
    }
};

tsconfig.json

{
    "compilerOptions": {
        "baseUrl": ".",
        "paths": {
            "@/stitches.config": [ "stitches.config" ]
        },
        "target": "es5",
        "lib": ["dom", "dom.iterable", "esnext"],
        "allowJs": true,
        "skipLibCheck": true,
        "strict": false,
        "forceConsistentCasingInFileNames": true,
        "noEmit": true,
        "esModuleInterop": true,
        "module": "esnext",
        "moduleResolution": "node",
        "resolveJsonModule": true,
        "isolatedModules": true,
        "jsx": "preserve",
        "incremental": true
    },
    "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
    "exclude": ["node_modules"]
}

stitches.config.ts

import { blue } from '@radix-ui/colors';
import { createStitches } from '@stitches/react';

const stitches = createStitches({
    theme: {
        colors: {
            ...blue
        }
    }
});

export const { config, getCssText, globalCss, keyframes, styled, theme } = stitches;

pages/_document.tsx

import { getCssText } from '@/stitches.config';
import { Html, Head, Main, NextScript } from 'next/document';

export default function Document() {
    return (
        <Html>
            <Head>
                <style id="stitches" dangerouslySetInnerHTML={ { __html: getCssText() } } />
            </Head>
            <body>
                <Main />
                <NextScript />
            </body>
        </Html>
    );
}

pages/_app.tsx

import { AppProps } from 'next/app';

export default function MyApp({ Component, pageProps }: AppProps) {
    return <Component { ...pageProps } />;
}

pages/index.tsx

import { styled } from '@/stitches.config';

const H1 = styled('h1', {
    backgroundColor: '$blue11'
});

export default function Page() {
    return (
        <H1>React Server Components in Next.js</H1>
    );
}

Expected behavior

I would expect that the SSR rendered page would have collected the styles from the given page so there is no FOUC, however, there are no matching css declarations when viewing the source of the page.

Screenshots

Here you can see that there is no matching rule for this className. I've simply set the background color for this element.

Here is the page source when downgrading Next to 11.1.2. You'll notice that the CSS is rendered properly on the server

System information

OS: Mac
Next.js: v12.0.2-canary.2
React: v18.0.0-alpha-6c3dcc7a4-20211027
ReactDOM: v18.0.0-alpha-6c3dcc7a4-20211027
Stitches: v1.2.5
Version of Node.js: v16.5.0

The text was updated successfully, but these errors were encountered:

franklinjavier · 2021-10-29T03:01:00Z

Have you tried to add id="stitches"?

For a better hydration strategy, we highly recommend adding an id="stitches" to your style tag.

<style id="stitches" dangerouslySetInnerHTML={ { __html: getCssText() } } />

Kinbaum · 2021-10-29T10:02:48Z

Yes. I meant to edit my code snippet. Has no impact.

StephenHaney · 2021-10-29T20:59:03Z

Streaming SSR w/ React 18 is a major change for dynamic CSS-in-JS libs and unsupported at the moment.

There's a thread here from the React team on what CSS-in-JS libs need to do to support React 18 SSR, good reading material:
reactwg/react-18#110

At the moment, we're reviewing this info and deciding on the best path towards support.

Kinbaum · 2021-10-29T21:30:32Z

This is a really great resource. Thank you for sharing. Looking forward to what you come up with.

b2rsp · 2021-11-24T09:59:51Z

Right now i am thinking of moving a large code of Less to Stiches but i am cautios if you guys are going to support this streaming SSR w react 18, is that planned or expected to be working on future?

peduarte · 2021-11-24T10:32:06Z

@b2rsp hi, yeah, we're considering it but would require some strategic changes - static extraction

b2rsp · 2021-12-22T12:48:25Z

@peduarte Thanks for feedback, either way we started migrating our system from less into stiches and so far realy enjoying it. Just looking foward to see about to see the streaming server SSR since that will be really good for page load perceived performance.

jimzer · 2022-02-04T14:11:08Z

Any news on Stiches with React 18 :) ?

Kinbaum closed this as completed Oct 29, 2021

joshuabaker mentioned this issue Feb 15, 2022

[FR] Static Extraction #955

Closed

Kinbaum mentioned this issue Apr 13, 2022

FOUC: Next.js 12.1.0 + @stitches/react 1.2.7 #995

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Next.js 12 and React 18 `getCSSText` not rendering styles SSR #863

Next.js 12 and React 18 `getCSSText` not rendering styles SSR #863

Kinbaum commented Oct 28, 2021 •

edited

Loading

franklinjavier commented Oct 29, 2021

Kinbaum commented Oct 29, 2021

StephenHaney commented Oct 29, 2021

Kinbaum commented Oct 29, 2021

b2rsp commented Nov 24, 2021 •

edited

Loading

peduarte commented Nov 24, 2021

b2rsp commented Dec 22, 2021

jimzer commented Feb 4, 2022

Next.js 12 and React 18 getCSSText not rendering styles SSR #863

Next.js 12 and React 18 getCSSText not rendering styles SSR #863

Comments

Kinbaum commented Oct 28, 2021 • edited Loading

Bug report

Describe the bug

To Reproduce

Expected behavior

Screenshots

System information

franklinjavier commented Oct 29, 2021

Kinbaum commented Oct 29, 2021

StephenHaney commented Oct 29, 2021

Kinbaum commented Oct 29, 2021

b2rsp commented Nov 24, 2021 • edited Loading

peduarte commented Nov 24, 2021

b2rsp commented Dec 22, 2021

jimzer commented Feb 4, 2022

Next.js 12 and React 18 `getCSSText` not rendering styles SSR #863

Next.js 12 and React 18 `getCSSText` not rendering styles SSR #863

Kinbaum commented Oct 28, 2021 •

edited

Loading

b2rsp commented Nov 24, 2021 •

edited

Loading