reactjs - Webpack och Typescript - "modulen har inga exports" fel

Jag bygger ett TypeScript React UI-komponentbibliotek ovanpå ett befintligt React UI-komponentbibliotek och paketerar det med Webpack 5.

Jag har den här Button-komponenten:

import { CLButton } from 'component-library'
import { ButtonProps } from './Button.types'

const Button = (props: ButtonProps): JSX.Element => {
  const {
    title = 'Hello, World!',
    body = 'I am the first component of this lib',
  } = props

  return (
    <div>
      <h1>{title}</h1>
      <p>{body}</p>
      <CLButton />
    </div>
  )
}

export default Button

Det här är min TS-konfigurationsfil:

{
  "compilerOptions": {
    
  

    /* Language and Environment */
    "target": "ES6",                                  /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */
    "lib": ["DOM", "ESNext"],                                        /* Specify a set of bundled library declaration files that describe the target runtime environment. */
    "jsx": "react-jsx",                                     /* Specify what JSX code is generated. */

    /* Modules */
    "module": "ESNext",                                /* Specify what module code is generated. */
    "rootDir": "src",                                  /* Specify the root folder within your source files. */
    "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
    "baseUrl": "/src",                                  /* Specify the base directory to resolve non-relative module names. */
    "paths": {
      "components": ["src/components/*"]
    },                                /* Specify a set of entries that re-map imports to additional lookup locations. */


    /* Emit */
    "declaration": true,                              /* Generate .d.ts files from TypeScript and JavaScript files in your project. */

    "sourceMap": true,                                /* Create source map files for emitted JavaScript files. */

    "outDir": "dist",                                   /* Specify an output folder for all emitted files. */

    "noEmit": false,                                   /* Disable emitting files from a compilation. */

    /* Interop Constraints */
    "isolatedModules": true,                          /* Ensure that each file can be safely transpiled without relying on other imports. */
    "allowSyntheticDefaultImports": true,               /* Allow 'import x from y' when a module doesn't have a default export. */
    "esModuleInterop": true,                             /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */
    // "preserveSymlinks": true,                         /* Disable resolving symlinks to their realpath. This correlates to the same flag in node. */
    "forceConsistentCasingInFileNames": true,            /* Ensure that casing is correct in imports. */

    /* Type Checking */
    "strict": true,                                      /* Enable all strict type-checking options. */
    "noImplicitAny": true,                            /* Enable error reporting for expressions and declarations with an implied 'any' type. */
    "strictNullChecks": true,                         /* When type checking, take into account 'null' and 'undefined'. */

    "noImplicitThis": true,                           /* Enable error reporting when 'this' is given the type 'any'. */

    "noImplicitReturns": true,                        /* Enable error reporting for codepaths that do not explicitly return in a function. */

    "skipLibCheck": true                               /* Skip type checking all .d.ts files. */

  },
  "include": [
    "globals.d.ts",
    "src/**/*"
, "index.ts"  ],
  "exclude": [
    "node_modules",
    "build",
    "dist",
    "webpack",
    "jest"
  ],
}

Och detta är min Webpack-konfigurationsfil:

import path from 'path'
import { fileURLToPath } from 'url'

const __filename = fileURLToPath(import.meta.url)

const __dirname = path.dirname(__filename)

export default {
  entry: {
    'my-component-library': './src/index.ts',
    'my-component-library.min': './src/index.ts',
  },
  mode: 'production',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js',
    library: 'my_component_library',
  },
  resolve: {
    extensions: ['js', '.ts', '.tsx'],
  },
  module: {
    rules: [
      {
        test: /\.(ts|tsx)$/,
        use: ['ts-loader'],
        include: path.resolve(__dirname, './src'),
        exclude: [/node_modules/, /\.stories.tsx$/, /\.test.tsx$/],
      },
      {
        test: /\.scss$/,
        use: ['style-loader', 'css-loader', 'sass-loader'],
        include: path.resolve(__dirname, './src'),
      },
    ],
  },
  externals: {
    react: 'react',
    'react-dom': 'react-dom',
  },
}

När jag kör webpack får jag följande fel:

WARNING in ./src/components/Button/Button.tsx 5:107-116
export 'CLButton' (imported as 'CLButton') was not found in 'component-library' (module has no exports)
 @ ./src/components/Button/index.ts 1:0-35 1:0-35
 @ ./src/components/index.ts 1:0-45 1:0-45
 @ ./src/index.ts 1:0-29 1:0-29

Varför är det så?