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

【问题标题】：Invariant Violation: Error while using React-Dom renderToString() in es6 importing不变违规：在 es6 导入中使用 React-Dom renderToString() 时出错
【发布时间】：2018-11-04 01:17:03
【问题描述】：

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

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

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

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

我正在像这样在快速服务器中导入 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：元素类型无效：应为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。

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

【问题讨论】：

您使用哪个版本的 Node？span>
尝试用const App = require('../common/component/App.js').default;替换import App from '../common/component/App.js';
require 是否支持 es6 导出？
是的...还是不行
试试 var MyApp=renderToString()

标签： reactjs express es6-modules server-side-rendering react-dom-server

【解决方案1】：

因为你已经在Line No 3导入App

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

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

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

有了这个

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

【讨论】：