HTML - styled-components: Ошибка: недопустимый тип элемента: ожидал строку или класс / функцию, но получил: объект

Question

Здравствуйте, я только начал использовать styled-components в своем проекте. Моя рабочая среда:

1) npm version 6.12

2) Node.js version 12.13

3) VS Code

После установки styled-components из официальная документация :

sudo npm install --save styled-components

мой проект больше не компилируется, выдавая следующую ошибку:

Ошибка: недопустимый тип элемента : ожидал строку (для встроенных компонентов) или класс / функцию (для составных компонентов), но получил: объект. Вероятно, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Проверьте метод рендеринга Home.

Что я сделал до сих пор:

1) По совету отладчика я дважды проверил свой Home page и попытался проверить, не забыл ли я import компонент. Однако он правильно импортирован, но все равно не работает.

2) Всегда в соответствии с рекомендациями отладчика, который я проверял, был ли недопустимый элемент типа. Однако я думаю, что синтаксис правильный. Чтобы быть уверенным в этом, я ознакомился с официальной документацией о том, как правильно ссылаться на эти типы компонентов. К сожалению, это тоже не сработало.

3) После дополнительных исследований я наткнулся на этот полезный пост . Похоже, что это может быть связано с неточной ссылкой на включение. Однако мой проект корректно работал / компилировался / собирался, пока я не установил styled-components. Все import/export я сделал таким же образом.

Я предоставляю следующие фрагменты кода, где у меня ошибка:

StyledHero. js

import styled from "styled-components"

const SimpleButton = styled.button`
    color:red;
    background:green;
`;

export default SimpleButton;

Дом. js

import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"

import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"

import Button from "../components/StyledHero"

export default function Home () {
    return (
      <>
        <Hero hero="defaultHero">
          <Banner title="Vessels" subtitle="Currently Tracked Vessels">
            <Link to="/vessels" className="btn-primary">
                Vessels
            </Link>
          </Banner>
        </Hero>
        <Services />
        <FeaturedVessel />
        <Button>hello</Button>
      </>
    );
}

Дополнительная опция, которую я попробовал:

В качестве заключительной записки к попытаться решить проблему. Я подумал, что компонент, созданный с помощью styled-components, должен быть экспортирован с тем же именем, поэтому я также попытался экспортировать его с точным именем компонента, созданного внутри StyledHero.js:

StyledHero. js

import styled from "styled-components"

const SimpleButton = styled.button`
  color:red;
  background:green;
`;

export default SimpleButton;

Home. js

import React from 'react'
import Hero from "../components/Hero"
import Banner from "../components/Banner"

import {Link} from "react-router-dom"
import Services from "../components/Services"
import FeaturedVessel from "../components/FeaturedVessels"

import SimpleButton from "../components/StyledHero"

export default function Home () {
    return (
      <>
        <Hero hero="defaultHero">
          <Banner title="Vessels" subtitle="Currently Tracked Vessels">
            <Link to="/vessels" className="btn-primary">
                Vessels
            </Link>
          </Banner>
        </Hero>
        <Services />
        <FeaturedVessel />
        <SimpleButton>hello</SimpleButton>
      </>
    );
}

Если это может быть полезно ниже моего package.json:

{
  "name": "my-project",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^4.2.4",
    "@testing-library/react": "^9.3.2",
    "@testing-library/user-event": "^7.1.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0",
    "react-icons": "^3.8.0",
    "react-router-dom": "^5.1.2",
    "react-scripts": "3.3.0",
    "styled-components": "^5.0.0"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Может кто-нибудь указать мне правильное направление и понять, в чем проблема?