styled-jsx icon indicating copy to clipboard operation
styled-jsx copied to clipboard

Published 20 hours ago • verified publisher icon vercel

FOUC when used with Next.js 10 and React 17

Open nicholaschiang opened this issue 4 years ago • 5 comments

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:

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

Or, if you want to reproduce locally:

  1. Clone this repository.
  2. Follow these instructions to install deps, etc.
  3. Run yarn dev or yarn build && yarn start
  4. Open up http://localhost:3000.
  5. 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.

nicholaschiang avatar Nov 16 '20 22:11 nicholaschiang

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

faizullah11 avatar Jan 14 '21 13:01 faizullah11

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;

"

faizullah11 avatar Jan 15 '21 06:01 faizullah11

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.

essential-randomness avatar Feb 08 '21 02:02 essential-randomness

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 avatar Feb 10 '21 14:02 valse

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

valse avatar Feb 23 '21 14:02 valse