Why using a variable as index of a list-item does not retrieve that item with clist_item:Nn?

Can the word crowd refer to just 10 people?

Windows reverting changes made by Linux to FAT32 partion

Parse a C++14 integer literal

Why does a table with a defined constant in its index compute 10X slower?

How can I monitor the bulk API limit?

Appropriate liquid/solvent for life in my underground environment on Venus

Would a "ring language" be possible?

How to laser-level close to a surface

Using `printf` to print variable containing `%` percent sign results in "bash: printf: `p': invalid format character"

What color to choose as "danger" if the main color of my app is red

Why do academics prefer Mac/Linux?

How many Dothraki are left as of Game of Thrones S8E5?

Hotel booking: Why is Agoda much cheaper than booking.com?

Why aren't satellites disintegrated even though they orbit earth within earth's Roche Limits?

Will this series of events work to drown a tarrasque?

How would fantasy dwarves exist, realistically?

Largest memory peripheral for Sinclair ZX81?

How does this piece of code determine array size without using sizeof( )?

Former Employer just sent me an IP Agreement

Why is choosing a suitable thermodynamic potential important?

Can an airline pilot be prosecuted for killing an unruly passenger who could not be physically restrained?

Why are there five extra turns in tournament Magic?

RegEx with d doesn’t work in if-else statement with [[

next-sass: Flash of unstyled content only when building for production

webpack's sass-loader do not find foundation scss file without underline prefixWebpack is not compiling/including my scss files in developmentWebpack scss & css modules react - unexpected token stringNext.js: Webpack ExtractTextPlugin not extracting scss in nodes_modules with next-sassNext.js - import css file does not workGenerating a webfont and it's styles using webpack & sassreact + webpack + “sass,css,style” - loader doesn't work with css transitions groupHow to use next-css in next.config.js in combination with custom server Express“ReactBingmaps” does not work with next - css file/module from node_modules is not supportedI get internal server error while running next js app with styled component

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

3

✅ Solved, see my reply below!

I'm using Next.js with next-sass. I've been struggling with a flash of unstyled content "FOUC" issue my entire day, testing various solutions I found online, but none seemed to work for me. The issue is especially visible when using CSS transitions, as the components will be visible without any styles and then transition to their CSS style.

This is only visible when building for production using next build and then next start. In development mode, using next, there is no FOUC issue.

Minimal example:

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();

// scss/style.scss
body 
 background-color: red;
 transition: 2s all ease;

// pages/index.js
import React from "react";
import "../scss/style.scss";

const Home = () => (
 <div>Test</div>
);

export default Home;

GitHub repo: https://github.com/jesperlindstrom/next-sass-fouc/

Video of problem: https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing

What am I doing wrong? Thanks!

webpack next.js

share|improve this question

edited Mar 24 at 12:48

Jesper Lindström

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I can't reproduce your probem put a github repo please
  
  – evgeni fotia
  Mar 24 at 8:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @evgenifotia thanks for checking it out. I added a GitHub repo and a video clip just now.
  
  – Jesper Lindström
  Mar 24 at 9:03
  

  
  
  
  

add a comment | 

3

✅ Solved, see my reply below!

I'm using Next.js with next-sass. I've been struggling with a flash of unstyled content "FOUC" issue my entire day, testing various solutions I found online, but none seemed to work for me. The issue is especially visible when using CSS transitions, as the components will be visible without any styles and then transition to their CSS style.

This is only visible when building for production using next build and then next start. In development mode, using next, there is no FOUC issue.

Minimal example:

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();

// scss/style.scss
body 
 background-color: red;
 transition: 2s all ease;

// pages/index.js
import React from "react";
import "../scss/style.scss";

const Home = () => (
 <div>Test</div>
);

export default Home;

GitHub repo: https://github.com/jesperlindstrom/next-sass-fouc/

Video of problem: https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing

What am I doing wrong? Thanks!

webpack next.js

share|improve this question

edited Mar 24 at 12:48

Jesper Lindström

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  I can't reproduce your probem put a github repo please
  
  – evgeni fotia
  Mar 24 at 8:14
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  @evgenifotia thanks for checking it out. I added a GitHub repo and a video clip just now.
  
  – Jesper Lindström
  Mar 24 at 9:03
  

  
  
  
  

add a comment | 

✅ Solved, see my reply below!

I'm using Next.js with next-sass. I've been struggling with a flash of unstyled content "FOUC" issue my entire day, testing various solutions I found online, but none seemed to work for me. The issue is especially visible when using CSS transitions, as the components will be visible without any styles and then transition to their CSS style.

This is only visible when building for production using next build and then next start. In development mode, using next, there is no FOUC issue.

Minimal example:

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();

// scss/style.scss
body 
 background-color: red;
 transition: 2s all ease;

// pages/index.js
import React from "react";
import "../scss/style.scss";

const Home = () => (
 <div>Test</div>
);

export default Home;

GitHub repo: https://github.com/jesperlindstrom/next-sass-fouc/

Video of problem: https://drive.google.com/file/d/12yukgmgsuPKRs0TD2yYZK9F7fBC7oSkF/view?usp=sharing

What am I doing wrong? Thanks!

webpack next.js

share|improve this question

edited Mar 24 at 12:48

Jesper Lindström

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

// next.config.js
const withSass = require('@zeit/next-sass');
module.exports = withSass();

// scss/style.scss
body 
 background-color: red;
 transition: 2s all ease;

// pages/index.js
import React from "react";
import "../scss/style.scss";

const Home = () => (
 <div>Test</div>
);

export default Home;

share|improve this question

edited Mar 24 at 12:48

Jesper Lindström

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

share|improve this question

edited Mar 24 at 12:48

Jesper Lindström

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

asked Mar 23 at 17:06

Jesper LindströmJesper Lindström

40439

1 Answer
1

active

oldest

votes

0

So... the issue turns out to be a browser bug, not related to Next or Webpack at all. Managed to replicate with ordinary CSS and HTML, where transitions are fired on load. The solution sounds very stupid but solves it: import an empty .js file in your . I'm guesing it makes both the resources "blocking" and therefore waits for first render...

If anyone has the same issue in Next.js, I added this to my _document.js:

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

...and put chrome-fix.js as an empty file in my /static.

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=332189

share|improve this answer

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55316262%2fnext-sass-flash-of-unstyled-content-only-when-building-for-production%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

So... the issue turns out to be a browser bug, not related to Next or Webpack at all. Managed to replicate with ordinary CSS and HTML, where transitions are fired on load. The solution sounds very stupid but solves it: import an empty .js file in your . I'm guesing it makes both the resources "blocking" and therefore waits for first render...

If anyone has the same issue in Next.js, I added this to my _document.js:

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

...and put chrome-fix.js as an empty file in my /static.

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=332189

share|improve this answer

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

add a comment | 

0

So... the issue turns out to be a browser bug, not related to Next or Webpack at all. Managed to replicate with ordinary CSS and HTML, where transitions are fired on load. The solution sounds very stupid but solves it: import an empty .js file in your . I'm guesing it makes both the resources "blocking" and therefore waits for first render...

If anyone has the same issue in Next.js, I added this to my _document.js:

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

...and put chrome-fix.js as an empty file in my /static.

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=332189

share|improve this answer

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

add a comment | 

So... the issue turns out to be a browser bug, not related to Next or Webpack at all. Managed to replicate with ordinary CSS and HTML, where transitions are fired on load. The solution sounds very stupid but solves it: import an empty .js file in your . I'm guesing it makes both the resources "blocking" and therefore waits for first render...

If anyone has the same issue in Next.js, I added this to my _document.js:

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

...and put chrome-fix.js as an empty file in my /static.

More info: https://bugs.chromium.org/p/chromium/issues/detail?id=332189

share|improve this answer

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

<Head>
...
<script src="/static/chrome-fix.js" />
</Head>

share|improve this answer

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439

answered Mar 24 at 12:46

Jesper LindströmJesper Lindström

40439