Рендеринг на стороне сервера React (ошибка renderToString): окно не определено - PullRequest
Новая
       9

Рендеринг на стороне сервера React (ошибка renderToString): окно не определено

0 голосов
/ 02 июня 2018

Вот метод рендеринга: 

const makeUniversalHTML = (req, res, preloadedState) => {
const App = require('../../client/App')
const store = configureStore(preloadedState)
const context = {}
const html = renderToString(
<App store={store} Router={StaticRouter} routerProps={{ location: 
req.url, context }} userAgent={req.headers['user-agent']} />)

const title = DocumentTitle.rewind()
let terminate = false

if (context.url) {
  res.redirect(302, context.url)
  terminate = true
 }

return { title, html, terminate }
}

ЗДЕСЬ МОЙ КОМПОНЕНТ ПРИЛОЖЕНИЯ 

     import React from "react"
     import PropTypes from 'prop-types'
     import { Provider } from "react-redux"
     import { Route, Switch, Redirect } from "react-router-dom"
     import getMuiTheme from "material-ui/styles/getMuiTheme"
     import { DragDropContextProvider } from "react-dnd"
     import HTML5Backend from "react-dnd-html5-backend"
     // import { AppBar, Drawer, Paper } from 'material-ui'
    import { connect } from 'react-redux'

    // src
     import { getCurrentUser } from './utils'
     import styles from "./App.scss"
     import './styles/css/bootstrap.scss'

     // custom
     import './styles/css/layout.scss'
     import './styles/css/theme.scss'
     import './styles/css/ui.scss'
     import './styles/css/app.scss'
     import MUITheme from "../config/theme"

     import {PageLogin} from "./components"


      const mapStateToProps = (state, ownProps) => {
        const user = getCurrentUser(state)
        return { user }
       }
      @connect(mapStateToProps)
        export default class App extends React.Component {
        static propTypes = {
        userAgent: PropTypes.string,
        store: PropTypes.object,
      }

      static childContextTypes = {
       muiTheme: PropTypes.object
      }

      constructor(props) {
       super(props)
       }
      getChildContext() {
      const { userAgent } = this.props
      const theme = userAgent ? Object.assign({ userAgent }, MUITheme) : 
       MUITheme

       return {
         muiTheme: getMuiTheme(theme)
          }
        }
       render() {
        const { store, Router, routerProps } = this.props
        const paperStyle = {
          left: this.props.user ? 256 : 0,
           width: '100%',
          height: '100%',
         backgroundColor: '#F5F5F5',
        }

       return (
        <DragDropContextProvider backend={HTML5Backend}>
        <Provider store={store}>
          <Router {...routerProps}>
            <div>
              <Navigation />

                <Switch>

                  <PublicRoute path="/login" component={PageLogin} />

                </Switch>

            </div>
          </Router>
        </Provider>
      </DragDropContextProvider>
    )
  }
}

Я получаю эту ошибку, если unviersal рендеринг true

ИнвариантНарушение: Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: object.

, а вторая ошибка

окно не определено

Я знаю, что когда универсальный рендеринг верен, реагирующий компонент рендерит со стороны сервера, а объект окна недоступен. Но вы можете видеть, что я не использую объект окнав моем коде все еще я получаю эту ошибку

...