h5web: Integration in Angular failing to import flattenChildren()

Describe the bug

I’m attempting to integrate the component in an Angular application. This is partially successful, I made an Angular wrapper component where I instantiate the h5web component as follows:

ReactDOM.render(
  React.createElement(H5GroveProvider, {
    url: url,
    filepath: '',
    children: React.createElement(App, {
      startFullscreen: false
    })
  }),
  document.getElementById(this.rootId)
);

My backend is h5grove compatible at the URL where I am testing it. I can browse the HDF5 tree just fine and can see metadata, attributes, and scalar values.

However, when I click a multidimensional dataset node, I get the following error:

react_keyed_flatten_children__WEBPACK_IMPORTED_MODULE_5__ is not a function

I traced this to the following line in the Toolbar function/class and checked with some console prints, and it indeed isn’t a function … it’s the react-keyed-flatten-children module object being referred at the following line:

const allChildren = flattenChildren(children).filter(isReactElement);

If I replace that line with:

const allChildren = flattenChildren.default(children).filter(isReactElement);

everything works fine! So somehow it is failing to recognise the default export on flattenChildren when I integrate the component in Angular.

Now, I don’t know much about TypeScript and JavaScript’s import magic, so I tried various combinations of setting the tsconfig values for esModuleInterop, allowSyntheticDefaultImports, isolatedModules and so forth but to no avail.

To Reproduce

I’m not sure anyone is interested in debugging my Angular setup since this is a React component so I was hoping for some wisdom from above regarding the peculiarities of TypeScript and/or JavaScript’s import behaviour. If that leads us nowhere I can always try setting up a clean Angular sample app.