Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

FOUC when used with Next.js 10 and React 17 #681

Open
nicholaschiang opened this issue Nov 16, 2020 · 5 comments
Open

FOUC when used with Next.js 10 and React 17 #681

nicholaschiang opened this issue Nov 16, 2020 · 5 comments

Comments

@nicholaschiang
Copy link

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.
@faizullah11
Copy link

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

@faizullah11
Copy link

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
Copy link

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
Copy link

valse commented Feb 10, 2021

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
Copy link

valse commented Feb 23, 2021

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

@pmillspaugh pmillspaugh mentioned this issue Jul 22, 2024
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
4 participants
@valse @nicholaschiang @faizullah11 @essential-randomness