SSR of CSS not working > Can not prevent FOUC (NextJS) #29

anniebombanie · 2022-04-22T19:59:12Z

Hi there!

I really love what you're doing with Twind. I've been implementing it in our codebase and got really far, but ultimately got blocked on an SSR issue and am unable to move forward.

We're seeing a FOUC on the pages because the CSS isn't getting rendered on server-side, and the styles only come in later on client-side.

In the building stage, we're seeing the LATE_SETUP_CALL notices and have not been able to resolve them. Looked through this open issue, but didn't seem to have a solution.

In the Twind Next JS Code Sandbox example, the styles are also missing from the head as well. It shows as an empty style tag: <style id="__tw-9"></style> without styles. We're seeing the same thing our end as well. This suggests that React is correctly creating the style element and setting the id: '__' + hash but not inserting any styles within or getting the textContent.

In the Sandbox example, there is a data-next-hide-fouc="true" but we don't want the page empty before the styles come in. We're assuming that SSR should work out of the box with the Twind integration, but is there something we've missed in the documentation that says otherwise? Bit of a loss as to what to do next, so any direction would be greatly appreciated!

Running on:

Node.js v15.8.0,
twind/next: ^1.0.9,
next: ^10.0.0,
using the tw function with no shim
custom App component + custom twind config

twind.config.js

/** @type {import('twind').Configuration} */
import { setup } from 'twind';
import { withForms } from '@twind/forms';

setup({
    preflight: withForms({
        '@font-face': [
            // fonts here
        ]
    }),
    theme: {
        fontFamily: {
           // fonts here
        },
        colors: {
            // colors here
        }
    }
});

export default {};

pages/_app.js

import React from 'react';
import Head from 'next/head';
import withTwindApp from '@twind/next/app';
import twindConfig from 'twind.config';
import globalAppStyles from './app.global.scss?type=global';

function PastelApp({ Component, pageProps }) {
    return (
        <>
            <Head>
                <meta charSet="utf-8" />
                <meta httpEquiv="X-UA-Compatible" content="IE=edge" />
                <meta
                    name="viewport"
                    content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
                />
            </Head>
            <>
                <style jsx global>
                    {globalAppStyles}
                </style>
            </>
            <Component {...pageProps} />
        </>
    );
}

export default withTwindApp(twindConfig, PastelApp);

pages/_document.tsx

import Document, { Html, Head, Main, NextScript } from 'next/document';
import { tw } from 'twind';
import withTwindDocument from '@twind/next/document';
import twindConfig from '../twind.config';

class MyDocument extends Document {
    static async getInitialProps(context) {
        const initialProps = await Document.getInitialProps(context);
        return { ...initialProps };
    }

    render() {
        return (
            <Html lang="en">
                <Head />
                <body className={tw`pastel-app bg-gray-100`}>
                    <Main />
                    <div className={tw`modal-root`} />
                    <NextScript />
                </body>
            </Html>
        );
    }
}

export default withTwindDocument(twindConfig, MyDocument);

next.config.js

process.env.NODE_ENV = process.env.NODE_ENV || 'development';

const webpack = require('webpack');
const path = require('path');

module.exports = {
    webpack: (config, { _dev, defaultLoaders }) => {
        config.plugins.push(
            new webpack.DefinePlugin({
                'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
            })
        );

        config.module.rules.push({
            test: /\.svg$/,
            use: ['@svgr/webpack']
        });

        config.module.rules.push({
            test: /\.(css|scss)$/,
            use: [
                defaultLoaders.babel,
                {
                    loader: require('styled-jsx/webpack').loader,
                    options: {
                        type: (fileName, options) => options.query.type || 'scoped'
                    }
                },
                {
                    loader: 'sass-loader',
                    options: {
                        sassOptions: {
                            includePaths: [path.resolve(__dirname, './styles')]
                        }
                    }
                }
            ]
        });

        return config;
    }
};

Thanks in advance!

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

sastan · 2022-04-23T05:46:36Z

Thanks for the report. I try to take a look next week. Would it be possible for you to upgrade to v1 (the next branch in the twind repo)? I believe that this issue is fixed there.

anniebombanie · 2022-04-25T18:17:07Z

Hi @sastan!

Thanks so much for getting back to me.

So I tried to upgrade to @v1.0.0-next.37 but there's a dependency error with @twind/next@1.0.9

When I try to --force this, it doesn't work. However, --legacy-peer-deps works and it installs.

Unfortunately, when trying to npm run dev, I then get these errors:

I've paired with my CTO on this to see if we could resolve this but the errors don't really make sense. Tried uninstalled/reinstalled node_modules several times as well but again, am stuck.

Currently, "twind": "^0.16.17" is able to build, except with the SSR issue. Thanks again for your help and attention! 🙏

sastan · 2022-04-26T05:53:01Z

That is my bad. Sorry. For v1 you should use @twind/with-next. There is an example linked in the readme.

I'm very sorry for the lack of documentation.

anniebombanie · 2022-05-02T19:14:03Z

Ahhh I see, I missed the @twind/next vs @twind/with-next 🤦🏻‍♀️ Thanks for letting me know! Quick update to let you know we're trying to get the upgrade working to see if it fixes the SSR issue. (Had to upgrade Next + a bunch of other dependencies and you know how fun that is lol) Will report back.

anniebombanie · 2022-05-17T21:38:22Z

Hi there,

Just an update.

In the end, it was a huge overhaul to try and upgrade our entire environment and codebase to get this working. We managed to isolate the issue to setup() which results in the LATE_SETUP_CALL {} error and causes SSR rendering to fail. Tried a similar solution to what JLarky wrote but it wasn't happening. Without using setup(), SSR rendering works. So we managed to make it work without.

Although this issue ultimately wasn't solved, feel free to close.

sastan closed this as completed Nov 19, 2022

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

SSR of CSS not working > Can not prevent FOUC (NextJS) #29

SSR of CSS not working > Can not prevent FOUC (NextJS) #29

anniebombanie commented Apr 22, 2022 •

edited

Loading

sastan commented Apr 23, 2022

anniebombanie commented Apr 25, 2022 •

edited

Loading

sastan commented Apr 26, 2022

anniebombanie commented May 2, 2022

anniebombanie commented May 17, 2022

SSR of CSS not working > Can not prevent FOUC (NextJS) #29

SSR of CSS not working > Can not prevent FOUC (NextJS) #29

Comments

anniebombanie commented Apr 22, 2022 • edited Loading

sastan commented Apr 23, 2022

anniebombanie commented Apr 25, 2022 • edited Loading

sastan commented Apr 26, 2022

anniebombanie commented May 2, 2022

anniebombanie commented May 17, 2022

anniebombanie commented Apr 22, 2022 •

edited

Loading

anniebombanie commented Apr 25, 2022 •

edited

Loading