React / Express - 'Unexpected token <' в вызове renderToString()

Question

React / Express - 'Unexpected token <' в вызове renderToString()

Я работаю над настройкой рендеринга на стороне сервера для моего приложения React / Express, но я сталкиваюсь с синтаксической ошибкой, связанной с вызовом react-dom/server renderToString() Метод. Я свободно следую этому учебнику - http://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/

index.js (Express app root):

'use strict'

require('babel-register')({

    presets: ['es2015', 'react']

});



const express = require('express')

const path = require('path')

const app = express()

const React = require('react')

const reactDomServer = require('react-dom/server')

const routes = require('./src/routes.jsx')

const reactRouter = require('react-router')

let { match, RouterContext } = reactRouter



app.get('*', (req, res) => {

    match({ routes: routes, location: req.url }, (err, redirect, props) => {

        const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)

        res.send(renderPage(appHtml))

    })

})

Однако это приводит к ошибке:

const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)

                                              ^

SyntaxError: Unexpected token <

Во всех подобных примерах, которые я видел, есть прямой компонент JSX... что я пропал?

709 2

javascript reactjs express react-router

2 ответов:

Comments

Ничего не найдено.

Kristofor Carle · Accepted Answer · 2017-07-07 06:13:28

babel-register не обрабатывает файл, из которого он вызывается, см. https://stackoverflow.com/a/29425761/1795821

Вам нужно будет поставить apt.get() вызывается в другой файл или используется другой метод загрузки Babel.

Так что создайте новый renderReact.js файл с
module.exports = function(app) {
  app.get('*', (req, res) => {
    match({ routes: routes, location: req.url }, (err, redirect, props) => {
        const appHtml = reactDomServer.renderToString(<RouterContext {...props}/>)
        res.send(renderPage(appHtml))
    })
})
}
Затем вернитесь в свой index.js Сделайте это вместо
let renderReact = require('./renderReact.js');
renderReact(app);

Dwayne Charrington · Accepted Answer · 2017-07-07 06:08:26

Я считаю, что проблема связана с тем, что требование babel-register будет работать не для файла, в который вы его импортируете, а для файлов, которые импортируются впоследствии. Таким образом, синтаксис JSX <RouterContext не будет подобран методом renderToString. Это случалось со мной и раньше, включая babel-register, поскольку синтаксис никогда не казался мне чистым.

То, что я лично сделал, и многие другие делают так: readDomServer.renderToString(React.createElement(RoutingContext, props)) используя метод createElement в React, вы можете сделать то же самое. Это решит вашу проблему.