'type is invalid' при использовании пользовательской библиотеки компонентов реагирования

Question

В настоящее время я работаю над своим первым проектом gatsby / реагировать / набирать текст, и одним из требований является создание библиотеки компонентов, которая должна содержать компоненты, обычно используемые в будущих приложениях.

Мой начальный тест только сработал один компонент (без index.ts, поскольку запись была самой FancyBanner.tsx).После добавления второго компонента (FancyButton.tsx) и index.ts я не могу использовать этот компонент в своем приложении.Происходит следующая ошибка:

Uncaught Error: недопустимый тип элемента: ожидается строка (для встроенных компонентов) или класс / функция (для составных компонентов), но получено: undefined.Скорее всего, вы забыли экспортировать компонент из файла, в котором он определен, или вы перепутали импорт по умолчанию и имена.

Настройка

• Гэтсби 2
• React 16.5
• Typescript 3
• Локальный реестр npm через Artifactory

Структура проекта (это упрощенная версия, поскольку файлы gatsby нужны только для тестированияне соответствующая встроенная библиотека компонентов)

component-lib/
  src/
    lib/
      fancy.css
      FancyButton.tsx
      FancyBanner.tsx
    index.ts
  index.d.ts
  package.json
  tsconfig.json
  webpack.config.js 

Два компонента почти идентичны, но должны дублировать два отдельных компонента:

import * as React from 'react';
import './fancy.css'

interface Props {
    text: string
}

interface State {
    /* no state required */
}

export default class FancyBanner extends React.Component<Props, State> {

    public static defaultProps: Partial<Props> = {
        text: "this is a fancy component"
    };

    public render() {
        return (
            <div className={"fancy"}>
                {this.props.text}
            </div>
        );
    };
}

-

import * as React from 'react';
import './fancy.css'

interface Props {
    text: string
}

interface State {
    /* no state required */
}

export default class FancyButton extends React.Component<Props, State> {

    public static defaultProps: Partial<Props> = {
        text: "this is a fancy button"
    };

    public render() {
        return (
            <div className={"button fancy"}>
                {this.props.text}
            </div>
        );
    };
}

The index.ts просто экспортирует два компонента

export * from "./fancy/FancyButton"
export * from "./fancy/FancyBanner"

index.d.ts"ручной работы" ( может быть, это проблема? )

import * as React from "react";

export interface Props {
    text: string;
}

export interface State {
}

export class FancyBanner extends React.Component<Props, State> {}

export class FancyButton extends React.Component<Props, State> {}

Наконец, различные файлы конфигурации

{
  "name": "company-component-lib",
  "description": "makes your app fancy",
  "version": "0.0.7-snapshot.10",
  "main": "dist/bundle.js",
  "types": "index.d.ts",
  "dependencies": {},
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack --watch",
    "build": "webpack",
    "local-release": "npm run build && npm link",
    "release": "npm run build && npm publish"
  },
  "devDependencies": {
    "@types/node": "^10.10.3",
    "@types/react": "^16.4.14",
    "@types/react-dom": "^16.0.7",
    "react": "^16.5.2",
    "react-dom": "^16.5.2",
    "react-helmet": "^5.2.0",
    "typescript": "^3.0.3",
    "css-loader": "^1.0.0",
    "gatsby": "^2.0.8",
    "gatsby-link": "^2.0.1",
    "gatsby-plugin-react-helmet": "^3.0.0",
    "gatsby-plugin-typescript": "^2.0.0",
    "style-loader": "^0.23.0",
    "webpack-cli": "^3.1.1",
    "ts-loader": "^5.2.1"
  },
  "publishConfig": {
    "type": "npm",
    "registry": "<myrepo>"
  },
  "files": [
    "dist/bundle.js",
    "index.d.ts"
  ]
}

-

{
  "compilerOptions": {
    "outDir": "./dist/",
    "module": "commonjs",
    "target": "es5",
    "jsx": "react",
    "declaration": true,
    "lib": ["dom", "es5"]
  },
  "include": [
    "./src/lib/**/*"
  ]
}

-

var path = require('path');

module.exports = {
    entry: './src/lib/index.ts',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                include: path.resolve(__dirname, 'src/lib'),
                exclude: /(node_modules|bower_components|public)/,
                use: 'ts-loader'
            },
            {
                test:/\.css$/,
                use:['style-loader','css-loader']
            }
        ]
    },
    externals: {
        'react': 'commonjs react'
    },
    resolve: {
        extensions: [".tsx", ".ts", ".js"]
    }
};

После сборки и публикацииЯ могу установить библиотеку компонентов в свое приложение, и IntelliJ автоматически добавляет импорт

import * as React from 'react'
import Layout from "../components/layout";
import {FancyBanner} from "company-component-lib";

export default class Page_7 extends React.Component<any, any> {

    public render() {
        return (
            <Layout>
                <div>
                    <h1>Component Sample Page</h1>

                    <FancyBanner text={"WOOOHOOO!"}/>

                </div>
            </Layout>
        )
    }
}

Я попробовал некоторые предложения из этого квеста , но ошибка остается.Как новичок в реакции / машинописи, у меня есть ощущение, что объявление машинописи - проблема, но я не могу найти ошибку в моей настройке.Любые намеки или предложения приветствуются.

##### UPDATE #####

После дальнейших исследований мы сбросили webpack с babel и просто использовали tsc на основе этот урок .Это руководство помогло нам создать библиотеку общих ресурсов, но, к сожалению, не отвечает на первый вопрос, почему модуль с webpack и babel не может быть импортирован (в частности, что мы сделали неправильно, и если webpack с babel подходит дляэтот сценарий).