Я пытаюсь настроить изоморфный серверный рендеринг. React приложение с помощью Webpack, но я получаю эту ошибку, когда пытаюсь превратить код React в строку с помощью renderToString :«Инвариантное нарушение» с использованием React Server renderToString на стороне сервера
Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).
Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.
я перестану получаю эту ошибку, когда я закомментируйте строку с функцией renderToString (конечно, приложение по-прежнему не работает - я просто больше не получаю сообщение об ошибке).
Я попытался передать renderToString <RootApp /> и React.createElement(RoutingContext вместо того, чтобы делать завод, и ни один из них не работал. Использование React.createElement привело к той же ошибке, и с использованием <RootApp /> бросил unexpected token < error.
И идеи о том, что может происходить?
Мое приложение выглядит следующим образом:
app.js
"use strict"
require("babel-register");
const Express = require('express');
const BodyParser = require('body-parser');
const Path = require('path');
const Fs = require('fs');
const Url = require('url');
const ReactRouter = require('react-router');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const app = Express();
app.set('view engine', 'ejs');
app.get('*', (req, res) => {
let RootApp = require('./components/app.jsx');
let rootAppFactory = React.createFactory(RootApp);
let reactHtml = ReactDOMServer.renderToString(rootAppFactory({}));
res.render('index', {reactOutput: reactHtml});
})
if (process.env.NODE_ENV !== 'test') {
let port = process.env.port || 4000;
app.listen(port);
console.log('Listening on port', port);
} else {
module.exports = app;
}
app.jsx
import React, {Component} from 'react';
import ReactDOM from 'react-dom';
class App extends Component {
render() {
return (
<div>
{this.props.children}
</div>
)
}
}
export default App;
index.ejs
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<title>Vjeverica</title>
</head>
<body>
<div id="root">
<%- reactOutput %>
</div>
<script src="bundle.js"></script>
</body>
</html>