时间戳

首页 > 解决方案 > 将 React 迁移到 SSR 的问题。从“@babel/runtime/helpers/esm/extends”导入 _extends

node.js - 将 React 迁移到 SSR 的问题。从“@babel/runtime/helpers/esm/extends”导入 _extends

问题描述

因此，我一直在关注有关如何将 React 迁移到 SSR 的 YouTube 教程，因为我想在 Google 的爬虫中获取我的应用程序。这是教程：https ://www.youtube.com/watch?v= NwyQONEqRXA 这是项目：https ://github.com/MerceneX/BoomMap/tree/development

不同之处在于我使用的是 npm 而教程花花公子使用的是纱线。由于我对此主题缺乏了解，因此不确定这是否会有所作为。我设置了 server.js 和 index.js （由于它不起作用，因此尚未提交给 github），并且在运行npm run ssr设置为运行时，node index.js我收到以下错误消息：

npm run ssr

> client@0.1.0 ssr D:\Projects\Webpages\BoomMap\clientTest
> node index.js

D:\Projects\Webpages\BoomMap\clientTest\node_modules\reactstrap\es\Col.js:1
(function (exports, require, module, __filename, __dirname) { import _extends from "@babel/runtime/helpers/esm/extends";
                                                                     ^^^^^^^^

SyntaxError: Unexpected identifier
    at new Script (vm.js:79:7)
    at createScript (vm.js:251:10)
    at Object.runInThisContext (vm.js:303:10)
    at Module._compile (internal/modules/cjs/loader.js:657:28)
    at Module._compile (D:\Projects\Webpages\BoomMap\clientTest\node_modules\pirates\lib\index.js:99:24)
    at Module._extensions..js (internal/modules/cjs/loader.js:700:10)
    at Object.newLoader [as .js] (D:\Projects\Webpages\BoomMap\clientTest\node_modules\pirates\lib\index.js:104:7)
    at Module.load (internal/modules/cjs/loader.js:599:32)
    at tryModuleLoad (internal/modules/cjs/loader.js:538:12)
    at Function.Module._load (internal/modules/cjs/loader.js:530:3)

server.js 和 index.js 与教程相同，但要将所有内容集中在一个地方，它们是：
index.js：

require("ignore-styles");

require("@babel/register")({
    ignore: [/(node_module)/],
    presets: ["@babel/preset-env", "@babel/preset-react"],
});

require("./server");

server.js：

import express from "express";
import fs from "fs";
import path from "path";

import React from "react";
import ReactDOMServer from "react-dom/server";
import App from "./src/App";

const PORT = 3005;

const app = express();

app.use("^/$", (req, res, next) => {
    fs.readFile(path.resolve("./build/index.html"), "utf-8", (err, data) => {
        if (err) {
            console.log(err);
            return res.status(500).send("Error reading build");
        }
        return res.send(
            data.replace(
                '<div id="root"></div>',
                `<div id="root">${ReactDOMServer.renderToString(<App />)}</div>`
            )
        );
    });
});

app.use(express.static(path.resolve(__dirname, "build")));

app.listen(PORT, () => {
    console.log(`App launched on localhost:${PORT}`);
});

我不知道该怎么做，因为错误来自 reacstrap 库。可能是依赖冲突？

无论如何，如果有人对如何将网站添加到 SSR 或任何其他方法以使其被 Google 抓取有更好的想法，我非常期待您的建议 :)

感谢您阅读本文，干杯。

标签： node.jsreactjsnpmbabeljsserver-side-rendering

解决方案

推荐阅读