Element type is invalid: expected a string (...) but got: object

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'));

I am getting the error: 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, or you might have mixed up default and named imports.

Check the render method of HotExportedComponent.

I know the import is pointing to the correct class. When I first run locally the desired text shows in the browser "Hi, I am a Car!". Then about half a second later the error pops up. I'm thinking it's something with the hot reload as indicated in the error message. Also I am using Gatsby for this.

Answer 1

Gatsby uses a built-in parsing from React, you don't need to import the ReactDOM in your index.js page like a standalone React application. Just:

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

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

export default Index;