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
    }
  },
..//
}

索引.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 並不完美。