Error [ERR_REQUIRE_ESM]: require() of ES Module error when using component in /pages instead of /app folder

[valerioleo]

In my project, we trying to integrate next-payload. However we still make use of the traditional /pages folder and we won't be moving those components any time soon.

I have noticed that, differently from components in the /app folder, any component in the /pages folder will break if trying to import a node_module.

I have created a very simple repro here:
payloadcms/next-payload-demo@main...valerioleo:next-payload-demo-fork:main

1. clone repo
2. yarn install
3. yarn dev
4. navigate to localhost:3000/test-page

---

I have tried to debug it without success, my hunch is that the use of @swc/register inside the withPayload is complicating things, however I couldn't find a way to fix it yet. I'll keep trying.

[denolfe]

Your problem here is the package you are attempting to use @uidotdev/usehooks is ESM-only and is not able to be used in CJS projects.

[valerioleo]

as per Discord convo, my nextjs app is a CJS and it was working correctly with ESM modules like @uidotdev/usehooks or superjson (used by tRPC), but it stopped working once I wrapped my next config object with withPayload.

[valerioleo]

Your problem here is the package you are attempting to use @uidotdev/usehooks is ESM-only and is not able to be used in CJS projects. @denolfe

To further investigate if the issue is a limitation of Payload being a CJS, I have added the @uidotdev/usehooks into a component that is imported using the /app folder. In that case it worked perfectly. You can see it here.

As I see it, this strengthen the thesis that it's withPayload that is messing something up with the transpiration of files in the /pages folder.

[denolfe]

This looks like an issue w/ how yarn v1 resolves dependencies. The workaround is here: payloadcms/payload#4109 (comment)

It sounds like this workaround will work here as well. Let me know if it does not, and I will reopen.