Webpack: при импорте пакета экспорт отображается как неопределенный

Question

У меня есть простая общая библиотека компонентов пользовательского интерфейса. Прямо сейчас это src / index. js выглядит так:

import Avatar from "./components/Avatar";
import Heading1 from "./components/Heading1";

import styles from "./global.css";

export { Avatar, Heading1 };

Моя конфигурация веб-пакета выглядит следующим образом:

var path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "main.js",
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
      {
        test: /\.(eot|woff|woff2|svg|ttf)([\?]?.*)$/,
        use: ["file-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
    ],
  },
};

Когда я пытаюсь импортировать разделяемую библиотеку пользовательского интерфейса в свой отдельный интерфейсное приложение React,

import { Avatar } from 'myapp-ui';
console.log('xxxxxxxxxxxxxxxxx', Avatar);

Распечатывает xxxxxxxxxxxxxxxxx undefined

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