Webpack捆绑包未导出React组件

Question

我正在构建一个前端程序包，该程序包将导出1个React组件供其他程序包导入和渲染。我正在尝试使用webpack捆绑我的React组件，但是似乎无法从捆绑包中导出我的组件。

我正在通过将dist/bundle直接导入故事书中的故事进行渲染来测试捆绑包。

这是我尝试做的一个天真的例子：

// index.js

import React from "react";

export const ComponentToExport = () => <h1>Hello World!</h1>;

// webpack.config.js

const path = require("path");

module.exports = {
  entry: "./app/index.js",

  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
    libraryTarget: "umd",
  },

  module: {
    rules: [
      {
        // transpile with babel
        test: /\.(js|jsx)?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
          },
        },
      },
    ],
  },
};

然后我运行webpack --mode development，生成捆绑包dist/bundle.js。

我在故事书中有一个故事，我正在尝试从dist导入捆绑包并进行渲染：

// app.stories.js

import React from "react";
import { ComponentToExport } from "../dist/bundle.js";
console.log("ComponentToExport: ", ComponentToExport);

export default { title: "RemoteComponentExample" };

export const example = () => (<ComponentToExport />);

我希望在页面上打印一个带有“ Hello World”的故事，但是我看到此错误：

React.createElement: type is invalid -- expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

在我故事的console.log(ComponentToExport)声明中，我也在自己的开发工具中得到了undefined返回。

我不认为该组件是从dist/bundle.js导出的。我尝试过更改webpack配置中的libraryTarget以及添加/删除其他一些选项，但是似乎没有任何作用。

我的webpack配置中应进行哪些更改，以便捆绑软件正确导出ComponentToExport组件，以便可以将其导入其他文件中，并最终由其他软件包使用？