Server Side Rendering with React Router Dom getting error: Warning: React.createElement: type is invalid -- expected a string

Question

Exact Error:

Warning: React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for co
mposite components) but got: object.
    in Posts
    in Connect(Posts)
    in Route
    in Switch
    in div
    in App
    in Route
    in Switch
    in div
    in Router
    in StaticRouter
    in Provider

I am getting error with doing server side rendering with react router 4. The error doesn't really point to anything in particular, but I think this comes from how I use the routes and exporting the components. I will post relevant code to this problem.

For client code I will post one component container since I export all of them in the same way. I just want you to get a since on how this is done. The component itself works just fine so I will be posting the export code at the bottom.

Note: this is a full working demo project (https://github.com/tbaustin/demo-SSR-RR4) and I use this same technique. I am also using turbo which is a scaffold type of system for react/redux. You will see that the app.js looks a little different than a normal express application, but I ensure you it works the same.

SERVER:

app.js:

require('babel-core/register')({
  presets: ['env', 'react', 'stage-0', 'stage-1']
});

const pkg_json = require('./package.json');
const vertex = require('vertex360')({ site_id: pkg_json.app });
var renderer = require('./renderer.js');

// initialize app
const app = vertex.app();

// import routes
const index = require('./routes/index');
const api = require('./routes/api');

// hopefully will be used on every Route, this should handle SSR RR4
app.use(renderer);

// set routes
app.use('/', index);
app.use('/api', api); // sample API Routes

module.exports = app;

renderer.js:

import React from 'react';
import { renderToString } from 'react-dom/server';
import { StaticRouter } from 'react-router-dom';
import { Provider } from 'react-redux';
import { renderRoutes } from 'react-router-config';
import serialize from 'serialize-javascript';
import { Helmet } from 'react-helmet';
import { matchRoutes } from 'react-router-config';

import routes from './src/routes';
import createStore from './src/stores';

function handleRender(res, req) {
  const store = createStore.configure(null); // create Store in order to get data from redux

  const promises = matchRoutes(routes, req.path)
    .map(({ route }) => {
      // Matches the route and loads data if loadData function is there
      return route.loadData ? route.loadData(store) : null;
    })
    .map(promise => {
      if (promise) {
        return new Promise((resolve, reject) => {
          promise.then(resolve).catch(resolve); // lets all data load even if route fails
        });
      }
    });

  Promise.all(promises).then(() => {
    const context = {};
    if (context.url) {
      return res.redirect(301, context.url); // redirect for non auth users
    }

    if (context.notFound) {
      res.status(404); // set status to 404 for unknown route
    }

    const content = renderToString(
      
        
          {renderRoutes(routes)}
        
      
    );

    const initialState = serialize(store.getState());

    const helmet = Helmet.renderStatic();

    res.render('index', { content, initialState, helmet });
  });
}

module.exports = handleRender;

index.mustache:




    {{{ helmet.title }}}
    {{{ helmet.meta }}}
  
  
    
    


    {{{ content }}}

CLIENT:

index.js:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { BrowserRouter } from 'react-router-dom';
import { renderRoutes } from 'react-router-config';

import store from './stores';
import routes from './routes';

const initialState = window.INITIAL_STATE;

ReactDOM.hydrate(
  
    
      {renderRoutes(routes)}
    
  ,
  document.getElementById('root')
);

Root App component:

import React from 'react';
import { renderRoutes } from 'react-router-config';

import Header from './partials/Header';
import actions from '../actions';

const App = ({ route }) => {
  return (
    
      
      {renderRoutes(route.routes)}
    
  );
};

export default {
  component: App,
  loadData: ({ dispatch }) => dispatch(actions.currentUser())
};

Posts.js:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import swal from 'sweetalert';
import { Link } from 'react-router-dom';

import { CreatePost } from '../view';
import { Account } from '../containers';
import actions from '../../actions';
import { DateUtils } from '../../utils';

class Posts extends Component {
  componentDidMount() {
    if (this.props.post.all == null) {
      this.props
        .fetchPosts({})
        .then(response => {
          return null;
        })
        .catch(err => {
          console.log(err);
        });
    }
    if (this.props.reply.all == null) {
      this.props
        .getReplies({})
        .then(() => {
          return null;
        })
        .catch(err => {
          console.log(err);
        });
    }
  }

  createPost(params) {
    const { currentUser } = this.props.user;
    if (currentUser == null) {
      swal({
        title: 'Oops...',
        text: 'Please Login or Register before posting',
        type: 'error'
      });
      return;
    }

    const updated = Object.assign({}, params, { profile: currentUser });

    this.props
      .createPost(updated)
      .then(data => {
        swal({
          title: 'Post Created',
          text: `Title: ${data.title}`,
          type: 'success'
        });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    const posts = this.props.post.all;
    const { currentUser } = this.props.user;
    return (
      
        
          
            
              {posts == null
                ? null
                : posts.map(post => {
                    return (
                      
                        
                          
                            
                          
                        
                        
                          
                            {post.title.length > 17 ? post.title.substr(0, 17) + '...' : post.title}
                          
                          
                            {post.text.length > 30 ? post.text.substr(0, 30) + '...' : post.text}
                          
                          
                            ~{' '}
                            
                              {post.profile.username || 'Anonymous'}
                            
                          
                        
                        
                          
                            {DateUtils.relativeTime(post.timestamp)}
                          
                        
                      
                    );
                  })}
            
          
          
            
              
                
              
            
            {currentUser == null ? null : (
              
                
                  
                    Create a Post
                  
                
                
                  
                    
                  
                
              
            )}
          
        
      
    );
  }
}

const stateToProps = state => {
  return {
    post: state.post,
    user: state.user,
    reply: state.reply
  };
};

const dispatchToProps = dispatch => {
  return {
    createPost: params => dispatch(actions.createPost(params)),
    fetchPosts: params => dispatch(actions.fetchPosts(params)),
    getReplies: params => dispatch(actions.getReplies(params))
  };
};

const loadData = store => {
  return store.dispatch(actions.fetchPosts());
};

export default {
  loadData: loadData,
  component: connect(stateToProps, dispatchToProps)(Posts)
};

CLIENT/SERVER ROUTES:

import React from 'react';

import { Post, Posts, Profile, NotFound } from './components/containers';
import App from './components/App';

export default [
  {
    ...App,
    routes: [
      {
        ...Posts,
        path: '/',
        exact: true
      },
      {
        ...Post,
        path: '/post/:id'
      },
      {
        ...Profile,
        path: '/profile/:id'
      },
      {
        ...NotFound
      }
    ]
  }
];

nem035 · Accepted Answer

My best guess would be that, within Posts.js, this code:

should be:

Or you could extract the component part at a higher level somewhere.

I'm basing this from the fact that Account is imported from containers, and other parts of your code expect exported containers to be of the form { component, loadData }.

If not, the other culprit could be CreatePost.

Server Side Rendering with React Router Dom getting error: Warning: React.createElement: type is invalid -- expected a string

Answers (1)

Related Questions