React-redux-universal-hot-example: What the FOUC? - Fix flash of unstyled content on production build

[erikras]

Can be seen on the demo site.

Previous discussion about this on #75.

[ostrgard]

Clue: If I set webpack/webpack-isomorphic-tools.js line 21 development: true, to false, the first request to the running production server will result in these errors:

[webpack-isomorphic-tools] [error] asset not found: ./src/views/App.scss
[webpack-isomorphic-tools] [error] asset not found: ./src/views/Home.scss
[webpack-isomorphic-tools] [error] asset not found: ./src/components/InfoBar.scss

Will continue debugging.

[ostrgard]

Clue: webpack-stats.json: style_modules is empty in production build – this seems to be the problem. If I manually fill it in with the compiled css class-names and run the server it works. Am I correct in understanding, that the server gets classnames from this file?

What I did:

1. npm run dev
2. Copy the webpack-stats.json style_modules object.
3. npm run build && npm run start
4. Paste the dev style_modules into webpack-stats.json
5. Get the compiled css class names from the JS files.
6. npm run start - gotta restart the server.

I'm pretty sure you can skip to step 3 and just use these class names:

"style_modules": {
  "./src/components/InfoBar.scss": {
    "infoBar": "_3CaW76q_itao4vT6ImAtWY",
    "time": "_3uiV15bAtFsNhGVmJOLUIm"
  },
  "./src/views/App.scss": {
    "app": "_2N2tMYhyM4guw6BcfLIHRZ",
    "brand": "H2EnzIdjXxu077Pyos9u9-S",
    "appContent": "_2TNaaqV4672lJZWDK3SmYl"
  },
  "./src/views/Home.scss": {
    "home": "_7W8gWO2O6UzmbjycMt06y",
    "masthead": "_3YnXLhQSO45M7g8zMwTS2m",
    "logo": "_3tAuMHJjDL3Bsi2es1fe9w",
    "humility": "_1zm76T9uCMq1qNPr",
    "github": "_1qAW-pHBGZ2CubHM1ExTk0",
    "counterContainer": "xXL-P-ZWCR_7Xn1jEVOAG"
  },
  "./src/views/Widgets.scss": {
    "widgets": "widgets___1yK6r",
    "refreshBtn": "refreshBtn___1J93x",
    "idCol": "idCol___2l9OG",
    "colorCol": "colorCol___34SUZ",
    "sprocketsCol": "sprocketsCol___2uTDi",
    "ownerCol": "ownerCol___3JdyO",
    "buttonCol": "buttonCol___1sBlw",
    "saving": "saving___3K3ia"
  },
  "./src/views/Login.scss": {
    "loginPage": "loginPage___RM2-l"
  }
}

Sorry for the spam.

[erikras]

Yes, the server gets classnames from this file. Don't apologize for spam. You're doing a great job working this out and showing your work.

So it sounds like you're saying that npm run build is _not_ generating the class names like it should, only npm run dev is?

[ostrgard]

So it sounds like you're saying that npm run build is not generating the class names like it should, only npm run dev is?

Yes, copying the scss loader from the dev config will generate the class names, but of course does not generate an external css file. So I guess it could be a problem with the ExtractTextPlugin?

[erikras]

I think you're on the right track, @ostrgard.

@halt-hammerzeit, what say you, Herr Webpack Guru?

[catamphetamine]

Yes, I had this "not found" issue when I made the Pull Request but since it rendered the production build I thought it was as intended.
I'm not sure if I noticed the flash at that time.
And I'm not sure why did I decide that this wasn't a bug.

So, indeed, production build doesn't generate style classes.
I'll find a solution in a half an hour I guess.

[catamphetamine]

In fact the development flag was introduced that very time specifically to suppress those not found errors.
@ostrgard some good debugging efforts there.

So, I found the error and it was kinda weird in a sense that everything kinda worked before this fix. I guess if we had some optional strong typing in Javascript such errors would be caught prematurely.
Here's the PR: https://github.com/erikras/react-redux-universal-hot-example/pull/154
It seems to work in a sense that it's 23:00 in Moscow and I'm falling asleep.
And I was planning to finish the last episode of True Detective Season 1 but I guess I'll just go to bed.

[ostrgard]

Well done @halt-hammerzeit! It's working here as well! I hope you get to finish True Detective soon... I wish I still had that last episode to watch ;)

Thank you both for your great work!

[bdefore]

After this fix, is it expected behavior to still see a flash of unstyled content when running in development?

[ostrgard]

@bdefore, yes.

[catamphetamine]

yes, because in development there is no CSS file and styles are loaded dynamically after the Html markup is rendered hence the flash

[simran66]

Here's how I finally managed to fix it in the production version : http://www.yourtechchick.com/reactjs/fix-fouc-in-react-flash-unstyled-content-react-isomorphic-application/ It totally works :) Hope that helps!

[ThunderBoltEngineer]

@simran66 Your link is not available now. Could you give me another reference or detailed instructions?

Thanks