Then, a CJS module requires it and re-exports it (in my real-world use case, this module actually does something with the component rather than just re-exporting the original one, but that's not relevant here)
This results in an Invalid Component error (expected ... but got undefined) error, but only during server-side rendering. If we tell Next to only render this on the client, it works fine.
This worked fine before 5.7.3.
Trying to dig in a bit more, I discovered that in the generated server bundle (inside the .next dir) imports to react-select were being compiled to dynamic import() calls (the ones that resolve to promises), whereas in versions before5.7.3 it got compiled to normal require calls, as expected.
The issue is reproducible by creating a starter Next.js app (using either the
pages
or theapp
router), and creating the following files:First, a regular ESM module that imports and uses
react-select
Then, a CJS module
requires
it and re-exports it (in my real-world use case, this module actually does something with the component rather than just re-exporting the original one, but that's not relevant here)And finally, a page imports and renders it
This results in an
Invalid Component error (expected ... but got undefined)
error, but only during server-side rendering. If we tell Next to only render this on the client, it works fine.This worked fine before
5.7.3
.Trying to dig in a bit more, I discovered that in the generated server bundle (inside the
.next
dir) imports toreact-select
were being compiled to dynamicimport()
calls (the ones that resolve to promises), whereas in versions before5.7.3
it got compiled to normalrequire
calls, as expected.