Issue with HTML and CSS for CRA 3

[swoppy]

Reference to https://github.com/stereobooster/react-snap/issues/274

I have the same issue wherein it messed up the layout after the whole process. I'm using CRA 3 with typescript and CSS Module. Some HTML tags are even missing after this whole process.

config

"react": "^16.13.1",
"react-dom": "^16.13.1",
"react-scripts": "3.4.1",
"react-snap": "^1.23.0"

"reactSnap": {
    "fixWebpackChunksIssue": false,
    "puppeteerIgnoreHTTPSErrors": true,
    "inlineCss": true,
    "puppeteerArgs": [
      "--no-sandbox",
      "--disable-setuid-sandbox"Q
    ]
  },

even did this INLINE_RUNTIME_CHUNK=false yarn build to build

[AMessina2]

I'm having the same problem

[therightprofile]

Same here

[tiffanyweb]

I have same problem... Does anyone have any idea?

[mihanizm56]

any updates?

[sandeepDevJs]

any updates?

[samuela]

Just came across this issue. In my case it turns out that react-snap was compiling App.css and index.css in a different order than they were rendered in CRA by default. CRA was giving App.css priority over index.css, and react-snap was the opposite. Removing conflicting styles across the two files fixed the issue for me.

[sandeepDevJs]

hi @samuela, My styles are breaking in mobile view, I cannot scroll into mobile, I am using material UI's bottom navigation & App Bar & Grid. Do you think it's the same issue?

[samuela]

Possible although these things are very tricky to debug. I don't know that there's a spec for which CSS gets loaded first anywhere

[MarcusBYUI]

Here is how I fixed a similar issue:

Apparently it has something to do with rehydration process of react: this article was a guide to understanging the siolution: https://www.joshwcomeau.com/react/the-perils-of-rehydration/#:~:text=to%20this%20heading-,The%20solution,-To%20avoid%20issues

const ComponentToBeRenderedOnAnotherRoutePath = () => {
  const [hasMounted, setHasMounted] = useState(false);

  useEffect(() => {
    setHasMounted(true);
  }, []);

  if (!hasMounted) {
    return null;
  } else
    return <>your code</>
};

export default ComponentToBeRenderedOnAnotherRoutePath;