FOUC when used with Next.js 10 and React 17

nicholaschiang commented 3 years ago

Do you want to request a feature or report a bug?

I wish to report a bug.

What is the current behavior?

When I used styled-jsx with Next.js 10 and React 17, there seems to be an unavoidable FOUC when visiting my portfolio website for the first time:

FOUC

It seems to be working fine with Next.js 9 and React 16. It's also definitely a bug with styled-jsx as those same styles were able to be loaded using SCSS modules in my TB project.

See this issue for more info.

If the current behavior is a bug, please provide the steps to reproduce and possibly a minimal demo or testcase in the form of a Next.js app, CodeSandbox URL or similar

Steps to reproduce the behavior, please provide code snippets or a repository:

Go to https://nicholaschiang.com.
See FOUC.

Or, if you want to reproduce locally:

Clone this repository.
Follow these instructions to install deps, etc.
Run yarn dev or yarn build && yarn start
Open up http://localhost:3000.
See FOUC.

What is the expected behavior?

There should be no FOUC.

Environment (include versions)

OS: PopOS 20.10
Browser (if applies) Firefox
Version of Next.js: 10.0.1
Version of React.js: 17.0.1
Version of Node.js: 12.18.3
Version of StyledJSX: 3.3.0

Did this work in previous versions?

Yes, it worked fine with previous version of Next.js and React.

faizullah11 commented 3 years ago

I have same problem. my nextjs version is 9.5.5 and react version is 16.8.6.

faizullah11 commented 3 years ago

I have done this with _documet.js like bellow " import Document, { Html, Head, Main, NextScript } from 'next/document';

exports.PERMANENT_REDIRECT_STATUS = 301;

class MyDocument extends Document {

componentDidMount() {

    if (typeof window !== "undefined") {
    window.onload = () => {
    document.getElementById("flashStyle").remove();
    };
    }

}

render() {
    return (
        <Html lang="en">

            <Head />
            <body>
            <script>0</script>
                 <Main /> 
                <NextScript /> 
            </body>

        </Html>

    );
}

}

export default MyDocument;

"

essential-randomness commented 3 years ago

Had the same problem and did a bit more investigating. This started happening after I upgraded to the latest Next (10.0.6) from Next 9.9.4 . Even after downgrading, however, the problem stayed.

Eventually, I went to compare the lock files between the working and not working version, and found that the non-working version installed the following version of styled-jsx in addition to the 3.3.0 I already had in yarn.lock

styled-jsx@^3.2.5:
  version "3.4.2"

Once I downgraded next and fixed styled jsx to version 3.3.0 the FOUC disappeared.

valse commented 3 years ago

I'm using next 10.0.6 and styled-jsx 3.3.2: if I upgrade to the latest 3.4.x I have FOUC issue too on production build.

valse commented 3 years ago

With the latest 3.4.4 version always FOUC issue... I don't know if it could help but we're using the SASS plugin too and we have the global style on a Layout common component on each page

vercel / styled-jsx