Нарушение инварианта: ошибка при использовании React-Dom renderToString () при импорте es6

Question

Этот вопрос совершенно другой, так как я много искал подобное, но не нашел ни одного. Я создаю проект функции рендеринга на стороне сервера и использую webpack для написания кода es6 и babel для компиляции jsx.В моем экспресс-маршруте я хочу преобразовать компонент App в строку, а затем перейти к статической части html.он работает нормально, когда я делаю так

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

, но теперь, когда я хочу, чтобы компонент приложения был здесь, он не работает

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

Я импортирую компонент приложения на экспресс-серверкак это

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

ошибка

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

Я также проверил некоторые проблемы в Github, но там они рекомендовали перейти к реакции-0.14, поскольку эти проблемы были старые, носейчас я использую реагирую 16

Answer 1

Поскольку вы уже импортируете приложение в Line No 3

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

Итак, чтобы исправить ваши проблемы, просто замените эту строку

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

с этим

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