typescript - Πρόβλημα εισαγωγής ESM module στο NextJs/TS

Περιβάλλον Δοκιμών Κώδικα

Μεταφέρω κάποια κώδικα στο NextJS 11/Webpack 5 και επίσης μερικά modules που τώρα είναι μόνο esm (ολόκληρο το οικοσύστημα remark/unified).

Πριν από την αναβάθμιση, μπορούσα να εξάγω όλα τα αρχεία ως σύνοψη σε ένα index.ts στον φάκελο όπως:

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

Και στον γονικό φάκελο θα είναι το "lib" (υποθέτοντας ότι τα παραπάνω βρίσκονται σε φάκελο με όνομα elements);

export * from './elements'

Τότε στον κώδικά μου μπορώ να κάνω:

import { MarkdownRenderer } from '../lib'

Αυτό πλέον δεν λειτουργεί και προκαλεί σφάλμα με:

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

Μετά από μερικά πειράματα βλέπω ότι δεν μπορώ να εισάγω/εξάγω το ευρετήριο σύνοψης στοιχείων - πρέπει να προσθέσω όλα τα στοιχεία/αρχεία απευθείας στο ευρετήριο της βιβλιοθήκης ως εξής:

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

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

Έχω ενεργοποιήσει τη σημαία esm για το NextJS και επίσης δοκίμασα το next-transpile-modules αλλά χωρίς τύχη.

Στο παραπάνω sandbox, κοιτάξτε το src/lib/index.ts και αλλάξτε τα σχόλια για να δείτε να λειτουργεί/να μην λειτουργεί.

Πώς μπορώ να διατηρήσω την δυνατότητα διαχείρισης των αρχείων περιλήψεών μου ανά φάκελο; Νομίζω ότι αυτό είναι ένα θέμα με το webpack αλλά δεν είμαι απόλυτα σίγουρος. Σίγουρα το Typescript δεν παραπονιέται με κανέναν τρόπο κατά την ανάπτυξη.

Σημειώστε ότι φαίνεται να λειτουργεί με παλαιότερη έκδοση του Node (όποια ήταν η προεπιλογή στο CodeSandbox - ίσως η 10), αλλά στην 14/16 δεν λειτουργεί.

Απάντηση #1

Άρα η λύση προς το παρόν είναι να προσαρμόσετε τη διαμόρφωση webpack του NextJS:

config.optimization.providedExports = true

Απάντηση ευγενικά παρεχόμενη από τον δημιουργό του webpack.