Click here for the Code Sandbox
I'm currently in the process of transitioning some code to NextJS 11 / Webpack 5, including certain modules that now exclusively support ECMAScript Modules (esm).
Prior to the upgrade, I could easily export all files as a summary in an index.ts within the folder like so:
export { default as MarkdownRenderer } from './markdownRenderer'
And in the parent folder "lib" (assuming the above is located in a directory named elements):
export * from './elements'
This method used to work for importing in my code:
import { MarkdownRenderer } from '../lib'
However, this no longer functions and results in the following error:
Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.
After experimenting, I discovered that I can't import/export the element summary index anymore - I have to directly add all components/files into the lib index as follows:
// Does not work
//export * from './elements'
// Works
export { default as MarkdownRenderer } from './elements/markdownRenderer'
I've enabled the esm flag for NextJS and even tried using next-transpile-modules, but with no success.
In the sandbox provided, take a look at the src/lib/index.ts file and toggle between the comments to see if it works or not.
How can I maintain the ability to manage my summary files on a per-folder basis? I suspect this may be a webpack issue, although I'm not entirely certain. Typescript doesn't seem to raise any issues regardless of the approach during development.
It appears to function with older versions of Node (possibly the default on CodeSandBox was Node 10), but on versions 14/16, it fails to work.