How to import `Chessground` with webpack 5.89.0 and `expose-loader`

Question

I want to use Chessground (https://github.com/lichess-org/chessground) in HTML pages, plain JavaScript, no framework:

<div id='board'></div>
<div id="board"></div>
<script src="assets/bundle.min.js"></script>
<script>const ground = Chessground(document.getElementById('board'), {})</script>

In my webpack.config.js I have this rule:

            {
                test: require.resolve('chessground'),
                loader: 'expose-loader',
                options: {
                    exposes: ['Chessground'],
                },
            }

My webpack entry point _assets/index.mjs is:

import { Chessground } from 'chessground';
console.log(Chessground);

If I run this with node 20.4.0 as node _assets/index.mjs it gives me [Function: Chessground].

But webpack:

ERROR in ./_assets/index.mjs 2:12-23
export 'Chessground' (imported as 'Chessground') was not found in 'chessground' (module has no exports)

I tried to change ./_assets/index.mjs to this:

import * as Chessground from 'chessground';
console.log(Chessground);

Now node gives me:

[Module: null prototype] {
  Chessground: [Function: Chessground],
  initModule: [Function: initModule]
}

Now webpack builds the bundle without an error but it actually just contains boilerplate, no real code. Consequently in my HTML page I get this error on the console:

(index):44 Uncaught ReferenceError: Chessground is not defined
    at (index):44:16
(anonymous) @ (index):44
chessground-exposed.js:1 Uncaught ReferenceError: require is not defined
    at chessground-exposed.js:1:1
    at index.mjs:2:24
(anonymous) @ chessground-exposed.js:1
(anonymous) @ index.mjs:2

How can I access Chessground from my html pages?