元素类型无效：预期为字符串（...），但得到了：对象

Question

App.js

import React from 'react';
import ReactDOM from 'react-dom';

class Car extends React.Component {
  render() {
    return <h2>Hi, I am a Car!</h2>;

      }

}

export default Car;

index.js

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

ReactDOM.render(<Car />, document.getElementById('root'));

我遇到了错误： 错误：元素类型无效：期望使用字符串（对于内置组件）或类/函数（对于复合组件），但得到了：对象。您可能忘记了从定义文件中导出组件，或者您可能混淆了默认导入和命名导入。

检查HotExportedComponent的呈现方法。

我知道导入指向正确的类。当我第一次在本地运行时，所需的文本会在浏览器中显示“嗨，我是汽车！”。然后大约半秒钟后，错误弹出。我认为这是错误消息中指示的热重装。我也在为此使用Gatsby。

Answer 1

Gatsby使用来自React的内置解析，您不需要像独立的React应用程序一样在ReactDOM页面中导入index.js。只是：

import React from 'react';
// import ReactDOM from 'react-dom'; //remove it
import Car from './App.js';

const Index = ()=>{
   return <Car/>
}

export default Index;