React.createElement: 类型在简单的空应用程序中无效

React.createElement: type is invalid in simple empty app

仍在努力实现简单的 运行 简单的 React 应用程序(仅供客户端使用)。

构建正常(可以查看配置

当我 运行 服务器时 - 客户端出现错误:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in.

at invariant (transformed.js:304)
at ReactCompositeComponentWrapper.instantiateReactComponent [as _instantiateReactComponent] (transformed.js:11912)
at ReactCompositeComponentWrapper.performInitialMount (transformed.js:27510)
at ReactCompositeComponentWrapper.mountComponent (transformed.js:27401)
at Object.mountComponent (transformed.js:4158)
at mountComponentIntoNode (transformed.js:12676)
at ReactReconcileTransaction.perform (transformed.js:5756)
at batchedMountComponentIntoNode (transformed.js:12698)
at ReactDefaultBatchingStrategyTransaction.perform (transformed.js:5756)
at Object.batchedUpdates (transformed.js:29031)

代码如下:

index.js

var React = require('react');
var ReactDOM = require('react-dom');
var App = require('./components/App.js');

ReactDOM.render(
    <App />,
    document.getElementById('app')
);

index.html

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>test</title>
    </head>
    <body>
        <div id='app'></div>
    </body>
</html>

App.js:

import React from 'react';
import ReactDOM from 'react-dom';
// import {render} from 'react-dom'; //didn't helped either

class App extends React.Component {
  render () {
    return (
      <div>
        <p> Hello React!</p>
      </div>
    );
  }
}

仅供参考:

答案是正确的,也是一回事。 不要忘记更改 import 上的所有 require,就像这里(在 index.js 中):

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App.js';

它准确地告诉你问题是什么:

You likely forgot to export your component from the file it's defined in.

更改App.js类似于:

// ...
export default class App extends React.Component {
// ...

顺便说一句,为什么你在 index.js 中使用 require 而在 App.js 中使用 ES6 导入?