标签: react-snap

我正在尝试在 ubuntu 18 中使用此命令 'sudo npm install --save-dev react-snap' 安装 react-snap 它给了我错误

ERROR: Failed to download Chromium r686378! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download.

搜索后，我将获得运行此命令的解决方案

sudo npm install -g puppeteer --unsafe-perm=true --allow-root

仍然运行此命令后，我面临此错误，我的反应版本是 16.8

    ERROR: Failed to download Chromium r686378! Set "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD" env variable to skip download
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! puppeteer@1.20.0 install: `node install.js`
    npm ERR! Exit status 1
    npm ERR! 
    npm ERR! Failed at the puppeteer@1.20.0 install script.
    npm ERR! This …

我需要启动一个 React 应用程序，我需要预渲染和路由，所以我安装了 react-snap 和 react-router。（react-router 执行路由，react-snap 显然用于预渲染）。

使用“npm start”在本地一切正常，但是当我进行生产构建并为其提供服务时，路由链接使页面重定向到新的 url，所以我总是看到主页。

我的渲染看起来像这样：

 render() {
    return (
      <Router>
        <React.Fragment>
          <MainNav/>
          <Route exact path="/" component={Home}/>
          <Route path="/greeting/:name/:surname" render={(props) => <Greetings text="Hello, " {...props} />} />
          <Route path="/About" component={About}/>
        </React.Fragment>
      </Router>
    );
  }

这是 react-snap 建议的我的 index.js

import React from 'react';
import { hydrate, render } from "react-dom";
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

const rootElement = document.getElementById("root");
if (rootElement.hasChildNodes()) {
  hydrate(<App />, rootElement);
} else { …

使用反应快照构建反应项目时出现错误。

我环顾四周，所有错误都与 puppeteer 有关 - 但我没有像这些问题一样使用 puppeteer 直接获取内容，因此答案不适用。

我认为问题在于，当react-snap渲染我的页面时，它们正在对我的服务器进行API调用，其中一些失败是因为它们未经身份验证或其他原因。但所有其他问题都表明这与“页面在完成之前退出”有关，我不知道当我运行react-snap 脚本时这意味着什么？它不像 puppeteer 那样获取页面。（也许是？我不知道，从未使用过 puppeteer）

这是我的脚本：

  "start": "react-scripts start",
    "build": "react-scripts --max_old_space_size=4096 build && npm run build-sw && npm run clean-cra-sw",
    "clean-cra-sw": "rm -f build/precache-manifest.*.js && rm -f build/service-worker.js",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "build-sw": "node ./src/sw-build.js",
    "postbuild": "react-snap"

这是调试日志中的错误"npm run build"

0 info it worked if it ends with ok
1 verbose cli [ 'C:\\Program Files\\nodejs\\node.exe',
1 verbose cli   'C:\\Users\\Spader\\AppData\\Roaming\\npm\\node_modules\\npm\\bin\\npm-cli.js',
1 verbose cli   'run',
1 verbose cli   'build' ] …

我有一个按以下方式工作的应用程序：

• 客户端包是使用 webpack 构建的并输出到/client/app/public/build.
• 快速服务器从 /server/index.js 运行并使用一些环境变量呈现车把模板。

在我运行yarn run build并postbuild执行脚本后，它立即失败并出现以下错误：

yarn run v1.9.4
$ react-snap
events.js:183
      throw er; // Unhandled 'error' event
      ^

Error: ENOENT: no such file or directory, open '/Users/aington/git/static-help/build/index.html'
error Command failed with exit code 1.

这是有道理的，因为该位置没有文件。

我知道react-snap它以成为一个零配置库而自豪，但我真的很想配置它，以便它可以指向正确的目录来提供文件。此外，Express 服务器提供了一个身份验证库，因此也需要运行。

期望能够react-snap做到这一点并且仍然抓取和预渲染网站是否现实？或者我应该探索其他选择？

我在 React 应用程序中使用 react-snap 包，它基本上可以生成整个应用程序的静态形式。但它实际上会抓取所有 AJAX 数据并获取它们，然后构建静态站点。但我希望 react-snap 跳过一些 AJAX 请求。我希望我的应用程序在客户端打开静态页面时发出这些请求。