react-snap 未在页面上呈现 html

Question

I am trying to render html on the page as source code by using react-snap plugin, with the following configuration in package.json

package.json

{
..//
"scripts": {
    "test": "jest",
    "coverage": "jest --coverage",
    "build:prod": "rm -rf dist && webpack --mode production --config webpack.prod.js",
    "start:dev": "rm -rf dist && webpack-dev-server --mode development --config webpack.dev.js",
    "postbuild": "react-snap"
  },
"reactSnap": {
    "source": "dist",
    "inlineCss": true,
    "removeBlobs": true,
    "removeScriptTags": true,
    "removeStyleTags": true,
    "minifyHtml": {
      "collapseWhitespace": false,
      "removeComments": false
    }
  },
..//
}

index.js

import { hydrate, render } from "react-dom";
const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
    hydrate(<App />, rootElement);
} else {
    render(<App />, rootElement);
}

but Its not working at all, please help

Answer 1

I've had problem when enabling the inlineCss option too. Turn it to false and try again.

"inlineCss": false,

It works with the default options too so you could completely remove the react-snap options in your package.json file.

But beware with react-snap I'm having other problems related to page refresh and react-router-dom. I'm not going to expand on this here but just know that react-snap is not perfect.