1

Here is Rendering method:

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 }
}

HERE IS My APP COMPONENT

     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>
    )
  }
}

I am getting these error if unviersal rendering true

Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

and second error is

window is not defined

I know that when universal rendering is true,react component is render from server side and window object is not available.but you can see i am not using window object in my code still i am getting this error

supra28
  • 1,646
  • 10
  • 17
I.ali
  • 201
  • 1
  • 3
  • 12
  • How are you exporting your PageLogin component? – supra28 Jun 02 '18 at 18:50
  • its not exporting issue of PageLogin component because it works well when unviersal rendering is false – I.ali Jun 02 '18 at 19:53
  • It is possible that you are using some library/package that is using the window object – supra28 Jun 02 '18 at 19:56
  • yup that can be possible.But how to solve this issue if it is due to some library.should i remove that library that causing issue or should i change their code?whats the right way to solve this issue if its occurring due to some library – I.ali Jun 03 '18 at 18:58
  • Probably go to their github repository, check the docs if it supports an alternate way of server supported way of doing the same thing. – supra28 Jun 03 '18 at 19:18

0 Answers0