不变违规：在 es6 导入中使用 React-Dom renderToString() 时出错

Question

这个问题非常不同，因为我搜索了很多类似的但没有找到任何我正在创建一个反应服务器端渲染功能的项目并使用 webpack 编写 es6 代码和 babel 编译 jsx。在我的快速路线中，我想将 App 组件转换为字符串，然后想传递给静态 html 部分。当我这样做时它工作正常

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

但是现在当我想要 App 组件在这里时它不起作用

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

我正在像这样在 express 服务器中导入 App 组件

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

我的App.js

import React from "react"

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

      </div>
    )
  }
}

错误

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

我也在 Github 中检查了一些问题，但他们建议迁移到 react-0.14，因为这些问题已经很老了，但现在我正在使用 react 16

Answer 1

因为您已经在 Line No 3

导入 App

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

因此，要解决您的问题，只需替换此行

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

有了这个

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

不变违规：在 es6 导入中使用 React-Dom renderToString() 时出错

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

express

reactjs

server-side-rendering

react-dom-server

es6-modules