Reload applies adds CSS Classes to a div that shouldn't have it

austincollinpena commented 4 years ago

Bug Report

Current Behavior When I load my page it applies the incorrect classes to a div, even though the pre-generated HTML files and first view get it right.

Code Sandbox

Live Demo Link

If you take a look at the top of the DOM Tree, you'll see that the \

\

has no classNames.

Refresh the page and the class from the home page is added "home-page-grid" which breaks the layout. Navigating to the home page, and then back to the blog page shows that the issue persists.

We see in the build folder that the

tag does not have the classname, but it gets added somehow.

Other notes:

This only occurs when running the production build

hsab commented 4 years ago

Having very similar issues to this with style modules applied to incorrect elements on refresh.

austincollinpena commented 4 years ago

@hsab Probably best to use a different library

iaguilarfer commented 2 years ago

Run into a similar issue and couldn't find an answer here thinking it was related to react-snap. It actually was an issue with how I was using React.hydrate. In case anyone else is having problems with this, this article is a good read and provides a good solution https://www.joshwcomeau.com/react/the-perils-of-rehydration/

Long story short, adding

const [hasMounted, setHasMounted] = React.useState(false);
  React.useEffect(() => {
    setHasMounted(true);
  }, []);
  if (!hasMounted) {
    return null;
  }

in your component should help.

stereobooster / react-snap

Reload applies adds CSS Classes to a div that shouldn't have it #437

Bug Report