元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。 ReactJS

Question

Can't resolve this issue. Whenever I import Layout I get the error above. When I import other components they work just fine. At first I thought the name Layout was reserved so I changed it but still got the same error.

App.js

import React, { Component } from 'react';
import Layout from "./components/Layout/Layout";

class App extends Component {
  render() {
    return (
      <div>
        <Layout />
      </div>
    )
  }
}

export default App

Layout.js

import React, { Component } from 'react'
import Footer from '../Footer/Footer'
import Quotes from '../Quotes/Quotes'
import './Layout.css'

class Layout extends Component {
    render() {
        return (
            <div className='bgImg'>
                <div className='centered text-center align-items-center justify-content-center'>
                    <Quotes />
                </div>
                <Footer />
            </div>
        )
    }
}

export default Layout

Answer 1

The error tells you exactly what you should do.
First, make you sure export the components properly:

/* relevant imports */

class Quotes extends Component {
  /* component code */
}

export default Quotes

Second make you use the proper import semantic in your Layout component:

import Quotes from '/path/to/your/component';

instead of

import {Quotes} from '/path/to/your/component';