Проблемы с миграцией React to SSR. import _extends из "@ babel / runtime / helpers / esm / extends" - PullRequest
Новая
       47

Проблемы с миграцией React to SSR. import _extends из "@ babel / runtime / helpers / esm / extends"

0 голосов
/ 15 апреля 2020

Итак, я следую руководству YouTube по переходу с React на SSR, так как хочу, чтобы мое приложение было в сканере Google. Это учебник: https://www.youtube.com/watch?v=NwyQONeqRXA А это проект: https://github.com/MerceneX/BoomMap/tree/development

Разница в том, что я использую npm, и чувак учебник используя пряжу. Не уверен, что это имеет значение из-за отсутствия у меня знаний об этой теме c. Я настраиваю сервер. 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)

Сервер. js и индекс. js - это то же самое, что и учебник, но для того, чтобы объединить все в одном месте, вот они:
index. js: 

require("ignore-styles");

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

require("./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}`);
});

Понятия не имею, что здесь делать, так как ошибка появляется из реактивной библиотеки. Может быть, конфликт зависимостей?

В любом случае, если у кого-то есть идея о том, как перевести веб-сайт в SSR или каким-либо другим способом сканировать его в Google, я очень ищу совет:)

Спасибо за чтение, ура.

...