[Bug] flash/flicker when opening webpage

Reporting a bug?

Provide as much information as you can to reproduce the issue. If the issue is not reproducible, it can’t be fixed!

Environment

react-static 7.4.2

Steps to Reproduce the problem

Base your steps off of any freshly installed react-static template!

1. react-static create react-static-test
2. yarn stage && yarn serve
3. open in chrome and run profiling and reload page
4. there will be a frames where the rendering will be cleared and then go back to the index content. this duration is longer depending on how much that needs to be hydrated.

Expected Behavior

I expect the page to load in chrome without any flickering or graphical if the static html matches the hydrated content.

Reproducible Demo

[shahrouzz]

@kvet you’re absolutely right, by adding

"resolutions": {
  "**/react-universal-component": "4.0.1"
}

to package.json I don’t see the same problem anymore. thanks!

I am not too familiar with react-static internals and its dependencies so I don’t follow what your fix to webpack-flush-chunks does. Is that a necessary to fix another issue? or can do I need to apply that in order for latest version of react-universal-component to start working correctly again?

[kvet]

@shahrouzz Seems like I have a solution for the issue.

First, you need manually downgrade react-universal-component to 4.0.1.

Also, take a look at the following thing: https://github.com/faceyspacey/webpack-flush-chunks/pull/82/files. We have applied this fix in order to get proper list of entry chunks by using patch-package