Как создать пакет библиотеки стилизованных компонентов для работы с Gatsby

Я пытаюсь создать пакет библиотеки компонентов со стилями, чтобы можно было повторно использовать свои стили для разных проектов.

Чтобы проверить, как это сделать, у меня есть два проекта.

1. ExampleStyledComponent — Где я пытаюсь собрать свои компоненты.
2. Проект Гэтсби — простой «новый Гэтсби». проект

Мне удалось правильно отобразить мой тестовый компонент в браузере с помощью «npm link», но когда я применяю стили, я продолжаю получать ошибку «Недопустимый вызов ловушки» в браузере.

упаковка —

- src
    - TestComponent.js
- index.js
- package.json

TestComponent.js —

import React from 'react';
import styled from 'styled-components';

const Container = styled.div`
    width: 100%;
    background-color: red;
`;

const TestComp = () => {
    return (
        <Container>
            <h1>Hello World</h1>
        </Container>
    );
};

export default TestComp;

index.js —

import TestComponent from './src/TestComponent';

export default TestComponent;

package.json —

{
    "name": "ExampleStyledComponent",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "peerDependencies": {
        "react": "16.x",
        "styled-components": "5.x"
    },
    "dependencies": {},
    "devDependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "react": "^16.13.1",
        "styled-components": "^5.1.1"
    }
}

Без стилизованных компонентов эта настройка работает нормально. Итак, как мне заставить стилизованные компоненты работать в моем npm-package. Я также попытался установить зависимости в свой проект Gatsby, но мне не повезло.

В моих зависимостях проекта Gatsby —

    "dependencies": {
        "babel-plugin-styled-components": "^1.11.1",
        "gatsby": "^2.24.42",
        "gatsby-image": "^2.4.15",
        "gatsby-plugin-manifest": "^2.4.22",
        "gatsby-plugin-offline": "^3.2.23",
        "gatsby-plugin-react-helmet": "^3.3.10",
        "gatsby-plugin-sharp": "^2.6.26",
        "gatsby-plugin-styled-components": "^3.3.10",
        "gatsby-source-filesystem": "^2.3.24",
        "gatsby-transformer-sharp": "^2.5.12",
        "prop-types": "^15.7.2",
        "react": "^16.12.0",
        "react-dom": "^16.12.0",
        "react-helmet": "^6.1.0",
        "styled-components": "^5.1.1"
    },

и gatsby-config.js

module.exports = {
    siteMetadata : {
        title       : `Gatsby Default Starter`,
        description : `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
        author      : `@gatsbyjs`
    },
    plugins      : [
        `gatsby-plugin-styled-components`,
        `gatsby-plugin-react-helmet`,
        {
            resolve : `gatsby-source-filesystem`,
            options : {
                name : `images`,
                path : `${__dirname}/src/images`
            }
        },
        `gatsby-transformer-sharp`,
        `gatsby-plugin-sharp`,
        {
            resolve : `gatsby-plugin-manifest`,
            options : {
                name             : `gatsby-starter-default`,
                short_name       : `starter`,
                start_url        : `/`,
                background_color : `#663399`,
                theme_color      : `#663399`,
                display          : `minimal-ui`,
                icon             : `src/images/gatsby-icon.png`
    ]
};

Как я импортирую его на страницу Gatsby index.js —

import React from 'react';
import Test from 'examplestyledcomponent';

const IndexPage = () => (
    <div>
        <Test />
    </div>
);

export default IndexPage;

Ошибка, которую я получаю в браузере, выглядит так:

Я действительно потерялся с этим, поэтому любая помощь будет оценена, спасибо!