Invariant Violation: Error while using React-Dom renderToString() in es6 importing

Question

This question is quite different as I searched a lot for similar but didnt find any I am creating a project of react server side rendering feature and using webpack to write the es6 code and babel to compile the jsx . In my express route I want to convert the App component to string and then want to pass to the static html part . it is working fine when I am doing like this

  var App = renderToString(<h1> Working Fine now </h1>);

but now when I want the App component to be here its not working

var App = renderToString(<App />); // Not working

I am importing App component in express server like this

    import React from "react";
    import ReactDOMServer , {renderToString} from "react-dom/server";
    import  App  from '../common/component/App.js';

My App.js

import React from "react"

 export default class App extends React.Component{
  render(){
    return (
      <div>
        <h1>From COmponent</h1>

      </div>
    )
  }
}

error

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

I checked some issues in Github too but there they were recommending to move to react-0.14 as those issues were old but now I am using react 16

Answer 1

Because you are already importing App at Line No 3

import App from '../common/component/App.js';

So, to fix your issues just replace this line

var App = renderToString(<App />); // Not working

with this

let MyApp = renderToString(<App />); // Working