I'm trying to make SSR, but I ran into the problem that babel doesn't recognize the syntax react.
Tell me if I’m doing the right thing, if not I will be grateful for the advice)
ReactApp.js
import ReactApp from '../src/containers/AppContainer'; const path = require("path"); const fs = require("file-system"); const React = require("react"); const { StaticRouter } = require("react-router-dom"); const ReactDOMServer = require("react-dom/server"); const { Helmet } = require('react-helmet'); const indexFile = path.resolve(__dirname, "..", "build", "index.html"); const indexFileContent = fs.readFileSync(indexFile, { encoding: "utf8" }); const ssrPlaceholder = '<span class="ssr-placeholder">{ssrData}</span>'; const helmetPlaceholder = '<meta name="$helmet-placeholder$">'; module.exports = (req, res) => { const context = {}; const AppWithRouter = ( <StaticRouter location={req.url} context={context}> <ReactApp/> </StaticRouter> ) const AppWithStyles = sheet.collectStyles(AppWithRouter); const App = ReactDOMServer.renderToString(AppWithStyles); const helmet = Helmet.renderStatic(); // const styleTags = sheet.getStyleTags(); if (context.url) res.redirect(301, context.url); const helmetData = ` ${helmet.title.toString()} ${helmet.meta.toString()} ${helmet.link.toString()} `; const content = indexFileContent .replace(helmetPlaceholder, helmetData) .replace(ssrPlaceholder, App); res.send(content) } Server
const debug = require("debug")("antonmazhuto:server"); const express = require("express"); const path = require("path"); const handleRenderReactApp = require("./reactApp"); const server = express(); const { HOST = "127.0.0.1", PORT = 8080 } = process.env; server.use( express.static(path.resolve(__dirname, "..", "build"), { index: false }) ); server.get("/*", handleRenderReactApp); server.listen(PORT, HOST, () => debug(`app started at ${HOST}:${PORT}`)); Html itself
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> Россия</title> <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1"> <meta name="$helmet-placeholder$"> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"> <link href="/images-new/favicon.ico" rel="icon"><!-- next scripts are needed to work with pdf ob booking page --> <script src="/scripts-new/libs/pdfobject.min.js"></script> <script src="/scripts-new/libs/pdfmake.min.js"></script> <script src="/scripts-new/libs/vfs_fonts.js"></script> <link href="/main.css?4427cb273d3b3e4bdeb2" rel="stylesheet"> <style> .ssr-placeholder{ opacity: 0; } </style> </head> <body> <div id="app"> <span class="ssr-placeholder">{ssrData}</span> </div> <script src="/main.js?4427cb273d3b3e4bdeb2"></script> </body> </html> .babelrc: {"presets": "env"}
When starting babel-node, server / index.js gives an error:
