RickWong/react-isomorphic-starterkit

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

pastelsky opened this issue · 1 comments

pastelsky commented

I'm trying to render an smart component on the server side, but I get the Error Not Found for every page. Errors in console indicate:

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.] name: 'Invariant Violation', framesToPop: 1 }
webpack: bundle is now INVALID.

Component

import React from "react";
import Transmit from 'react-transmit';

class Home extends React.Component {
  render() {
    const { result } = this.props;

    return (
      <h1>I am the search box { result.toString() }</h1>
    );
  }
}

export default Transmit.createContainer(Home, {
  fragments: {
    result() {
      return fetch("ab.html");
    },
  },
});

server.js ( Koa )


import React from "react";
import { RouterContext, match} from "react-router";
import routes from "./routes";
import Transmit from "react-transmit";
app.use(function* main(next) {
    match({ routes, location: this.path }, (err, redirect, props) => {

 Transmit
    .renderToString(
      <RouterContext {...props} />
    )
    .then(({ reactString, reactData }) => {

      console.log(reactString, reactData);  //This never gets printed

      let output = (
        `<!doctype html>
            <html lang="en-us">
                <head>
                    <meta charset="utf-8">
                    <title>react-isomorphic-starterkit</title>
                    <link rel="shortcut icon" href="/favicon.ico">
                </head>
                <body>
                    <div id="react-root">${reactString}</div>
                </body>
            </html>`
      );
      this.type = "text/html";
      this.body = output;
    })
    .catch((error) => {
      this.status = 500;
      return;
    });
AndreLion commented

How did you fix it?