TypeError（“超级表达式必须是 null 或函数”） - 当 App 是 class 而不是 function 时

Question

这运行没有错误：

/components/App.js：

import * as React from 'react';
export function App() {
  return (
    <div>
    </div>
  )
}

/renderers/dom.js：

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { App }  from 'components/App';
import '../styles/index.css';

ReactDOM.hydrate(
  <App initialData={window.__R_DATA.initialData} />,
  document.getElementById('root'),
);

/renderers/server.js：

import * as React from 'react';
import * as ReactDOMServer from 'react-dom/server';
import { App } from 'components/App';

export async function serverRenderer() {
  const initialData = {
    appName: 'My Project',
  };

  const pageData = {
    title: `${initialData.appName}`,
  };

  return Promise.resolve({
    initialData,
    initialMarkup: ReactDOMServer.renderToString(
      <App initialData={initialData} />,
    ),
    pageData,
  });
}

但是，当我使用 class 而不是 function 切换 App.js 时（并且还使用(import React)切换出(import * as React) ) 以避免另一个奇怪的错误）：

import React from 'react';

class App extends React.component {
    render () {
        <div>
        </div>
    }
}

export default App;

并用 App 切换其他两个文件中的{ App } App应用程序崩溃，我收到以下错误：

    /Users/me/myProject/node_modules/@babel/runtime/helpers/inherits.js:5
[0]     throw new TypeError("Super expression must either be null or a function");
[0]     ^
[0] 
[0] TypeError: Super expression must either be null or a function
[0]     at _inherits (/Users/me/myProject/node_modules/@babel/runtime/helpers/inherits.js:5:11)
[0]     at /Users/me/myProject/src/components/App.js:29:26
[0]     at Object.<anonymous> (/Users/me/myProject/src/components/App.js:46:2)
[0]     at Module._compile (internal/modules/cjs/loader.js:1076:30)
[0]     at Module._compile (/Users/me/myProject/node_modules/pirates/lib/index.js:99:24)
[0]     at Module._extensions..js (internal/modules/cjs/loader.js:1097:10)
[0]     at Object.newLoader [as .js] (/Users/me/myProject/node_modules/pirates/lib/index.js:104:7)
[0]     at Module.load (internal/modules/cjs/loader.js:941:32)
[0]     at Function.Module._load (internal/modules/cjs/loader.js:782:14)
[0]     at Module.require (internal/modules/cjs/loader.js:965:19)

谁能解释导致此错误的原因？

我的怀疑是它与 <App> 在两个不同的文件中被调用两次有关，但我不知道 - 我可以通过使用 function 而不是 class 来解决它，但我想要灵活性和理解正在发生的事情。

郑重声明，我并不是 100% 了解 dom.js 和 server.js 的用途——我怀疑它们是为了帮助我的应用程序在服务器端运行，但我不确定——它们是我提供的用于安装我的 React 项目（ https://github.com/samerbuna ）。

Answer 1

React.component 不存在，React.Component 是对的