Тип элемента недопустим: ожидал строку или класс / функцию, но получил: undefined (возможно смешанный экспорт по умолчанию / именованный экспорт)

Question

Я пытался настроить библиотеку компонентов пользовательского интерфейса, которая использует React и TypeScript. Ожидается, что я смогу отделить свою библиотеку компонентов пользовательского интерфейса от Project B, который является проектом с несколькими репо, так что каждый из проектов в Project B может импортировать библиотеку как зависимость.

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

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

Моя структура репо выглядит примерно так:

ui-component-lib
|- package.json
|- tsconfig.json
|- src
   |- index.ts
   |- components
      |- Button
         |- index.ts
      |- Menu
         |- index.ts

src/components/Button/index.ts:

import * as React from 'react';

export default class Button extends React.Component {
  render() {
    return <button>Button</button>;
  }
}

src/index.ts:

export * from './components/Button';
export * from './components/Menu';

tsconfig.json:

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "declaration": true,
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "isolatedModules": false,
    "jsx": "react",
    "lib": [
      "esnext",
      "dom"
    ],
    "module": "commonjs",
    "moduleResolution": "node",
    "noEmitOnError": true,
    "noImplicitReturns": true,
    "noUnusedLocals": true,
    "pretty": true,
    "removeComments": false,
    "strict": true,
    "target": "esnext",
    "useDefineForClassFields": false,
    "composite": true,
    "declarationMap": true,
    "emitDeclarationOnly": false,
    "sourceMap": true,
    "outDir": "dist",
    "declarationDir": "dist",
    "rootDir": "src"
  },
  "include": [
    "src/**/*.ts",
    "src/**/*.tsx"
  ],
  "exclude": [
    "src/**/*.test.tsx",
    "src/**/*.test.ts"
  ]
}

Я импортировал свои компоненты примерно так :

import { Menu, Button } from 'ui-component-lib';

Вещи, которые я пробовал

• Я использую Webpack с ts-loader для компиляции, и конфигурация там стандартная. Я также попытался использовать Rollup и плагины для Typescript (@rollup/plugin-typescript и rollup-plugin-typescript2), просто чтобы убедиться, что это не проблема в процессе сборки. Поэтому я предполагаю, что это проблема либо с кодом, либо с конфигурациями компиляции.
• Попытка установки allowSyntheticDefaultImports в tsconfig.json как ложного, потому что это сработало для некоторых людей (через копание проблем Github и здесь ), но у меня это не сработало.
• Пробовал читать и экспериментировать с конфигами других похожих проектов (например, Blueprint ), но без кубиков.
• Пробная настройка вверх MWE для ui-component-lib, и пусть проект B будет создан с использованием приложения create-реагировать (с TS), но я получил ошибку:

JSX element type Button does not have any construct or call signatures.

• Проверены проблемы Github и SE для похожих проблем:
  • React.createElement: тип недействителен - ожидается строка , убедитесь, что используется export default
  • Тип элемента недопустим: ожидается строка (для встроенных компонентов) или класс / функция Да, используя import { Button } from 'lib', а не import Button from 'lib'
  • https://github.com/facebook/react/issues/12214
  • Microsoft / TypeScript # 14558

Заключительные замечания

Пожалуйста, дайте мне знать, если вам нужна дополнительная информация, чтобы помочь мне решить эту проблему. Заранее всем большое спасибо.