javascript - react-snap 没有在页面上呈现 html

Question

我正在尝试使用react-snap插件将页面上的 html 呈现为源代码，并在其中进行以下配置package.json

包.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);
}

但它根本不起作用，请帮助

Answer 1

启用 inlineCss 选项时我也遇到了问题。将其设置为 false 并重试。

"inlineCss": false,

它也适用于默认选项，因此您可以完全删除 package.json 文件中的 react-snap 选项。

但是要注意 react-snap 我还有其他与页面刷新和 react-router-dom 相关的问题。我不打算在这里扩展它，但只知道 react-snap 并不完美。