typescript - problém s importem ESM modulu v NextJs/TS

Kódový písečný box

Migruji nějaký kód na NextJS 11/Webpack 5 a také některé moduly, které jsou nyní pouze ESM (celý ekosystém remark/unified).

Před upgradováním jsem byl schopen exportovat všechny soubory jako souhrn v index.ts ve složce, například:

export { default as MarkdownRenderer } from './markdownRenderer'

A v nadřazené složce s názvem „lib“ (za předpokladu, že výše uvedené je ve složce s názvem elements);

export * from './elements'

Pak v mém kódu mohu udělat:

import { MarkdownRenderer } from '../lib'

Toto již nefunguje a selhává s:

Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. 

Po nějakých pokusech vidím, že nemohu importovat/exportovat index souhrnu prvků - musím přidat všechny komponenty/soubory přímo do indexu knihovny takto:

// Not workie
//export * from './elements'

// Workie
export { default as MarkdownRenderer } from './elements/markdownRenderer'

Povolil jsem příznak esm pro NextJS a také experimentoval s next-transpile-modules, ale bez úspěchu.

V uvedeném sandboxu se podívejte na src/lib/index.ts a změňte komentáře, abyste viděli, jak to funguje/nefunguje.

Jak si zachovat možnost spravovat své souhrnné soubory na úrovni jednotlivých složek? Myslím, že je to problém s webpackem, ale nejsem si úplně jistý. Typescript si určitě během vývoje nijak nestěžuje.

Všimněte si, že to zdá se funguje se starší verzí Node (ať už byla výchozí na CodeSandbox - možná 10), ale na 14/16 to nefunguje.

Odpověď č. 1

Takže řešení prozatím je upravit konfiguraci webpacku v NextJS:

config.optimization.providedExports = true

Odpověď laskavě poskytnutá autorem webpacku.