I am migrating some code to NextJS 11 / Webpack 5 and also some modules which are now esm only (the whole remark/unified ecosystem).
Before the upgrade I was able to export all files as a summary in an index.ts in the folder such as:
export { default as MarkdownRenderer } from './markdownRenderer'
And in parent folder sal "lib" (assuming the above is in a folder called elements);
export * from './elements'
Then in my code I can do:
import { MarkdownRenderer } from '../lib'
This no longer works and breaks with:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
After some experimentation I see that I cannot import/export the element summary index - I have to add all components/files directly in the lib index as:
// Not workie
//export * from './elements'
// Workie
export { default as MarkdownRenderer } from './elements/markdownRenderer'
I have enabled the esm flag for NextJS and also experimented with next-transpile-modules but no luck.
In above sandbox, look at the src/lib/index.ts and change the comments to see it work/not work.
How do I keep the ability to manage my summary files on a per folder basis? I think this is a webpack issue but not totally certain. Typescript certainly does not complain either way during development.
Note that it seems to work with older Node (whatever the default was on CodeSanbox - maybe 10) but on 14/16 its a no go.