Сборка компонентов библиотеки React с помощью Webpack 4

Question

В настоящее время я собираю библиотеку компонентов React и связываю ее с Webpack 4.

Все прекрасно работает, от сборки пакета библиотеки до публикации ее в реестре npm.

Нозатем я не могу импортировать ни один из его компонентов в другое приложение React и получить это сообщение об ошибке во время выполнения:

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

А вот соответствующий код:

тупой компонентиз моей библиотеки компонентов: button/index.js

import React from "react";

const Button = () => <button>Foobar</button>;

export { Button };

Основная точка входа в мою библиотеку index.js:

import { Button } from "./src/components/Button";

export { Button };

Моя конфигурация Webpack webpack.config.js:

const path = require("path");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");

module.exports = {
  entry: "./index.js",
  plugins: [new CleanWebpackPlugin()],
  module: {
    rules: [
      {
        test: /\.m?js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader"
        }
      }
    ]
  },
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "dist"),
    libraryTarget: "commonjs",
    library: ""
  }
};

И, наконец, импорт этого компонента в другое приложение:

import { Button } from "my-design-system";

Я предполагаю, что что-то пропущено в моей конфигурации Webpack или одно из свойств может быть неправильным, но после прочтения нескольких сообщенийи учебники, я не могу понять, какой из них.