[Case Study] Vercel+nextjs PnP compatibility

[kachkaev]

What package is covered by this investigations?

• resolve-from (34M+ downloads per week)
• next (950K+ downloads a week)
• @vercel/next (350K+ downloads a week) – used to deploy Next.js apps to Vercel

Describe the goal of the investigation

Help Vercel users deploy their Next.js apps via GitHub (the same way it works for Yarn v1)

Investigation report

At the moment, it seems to be impossible to deploy a Next.js app using Yarn v2 into Vercel. You can find an example project in https://github.com/kachkaev/njt/pull/29. The problem is being discussed in https://github.com/vercel/vercel/discussions/4910. Official issue: https://github.com/vercel/vercel/issues/5280.

Most likely the blocker is in these lines: https://github.com/vercel/vercel/blob/c7e2280d231443917ecab2fffefdf0aea2a5bb78/packages/now-next/src/index.ts#L144-L154.

This takes us to a pretty popular resolve-from package and this issue in particular: https://github.com/sindresorhus/resolve-from/issues/16. Maaaaybe the source of incompatibility is somewhere around here: https://github.com/sindresorhus/resolve-from/blob/188ed7da119c788d98272852e8a71fd19195f6cf/index.js#L29-L33.

I guess the reason for using resolveFrom in @vercel/next is the desire to support monorepos. A Next.js app is usually installed in the root of the repo (like in the example project I shared earlier), but it can also reside in packages/my-app-1 and packages/my-app-2, for instance. In practice, such apps may refer to different versions of next in their package.json files.

Given the popularity of all the three parts of the broken equation, it’d be great to get some help from the Yarn 2 community. Perhaps, the fix is not that complicated for those who understand the workings of PnP? Happy to help with testing! 🙌

[merceyz]

Just to echo this here as well

https://github.com/sindresorhus/resolve-from/issues/16#issuecomment-714779377 This package already supports PnP, it's using Module._resolveFilename which supports PnP, so there are no changes required here.

Most likely the blocker is in these lines: https://github.com/vercel/vercel/blob/c7e2280d231443917ecab2fffefdf0aea2a5bb78/packages/now-next/src/index.ts#L144-L154.

Depends, how does it get here? Is it something they invoke on their servers or is it run by the user?

We have a Discord server if you want to discuss this there

[kachkaev]

Is it something they invoke on their servers or is it run by the user?

I believe that @vercel/next package is fetched and executed in vercel.com CI. It is kicked off by the GitHub integration with Vercel, which means that there could be some environment-specific quirks. Interestingly, Vercel’s knowledge base explicitly elaborates on the limited Yarn 2 support: https://vercel.com/knowledge/does-vercel-support-yarn-2

What I see on my end is these logs – that’s not very helpful for this investigation probably.

As a user of Next.js and Vercel, I don’t have more insight unfortunately. Perhaps, @timneutkens or @Timer could link you to the right people? (sorry for spam-tagging folks 🙏)

[arcanis]

I wonder is what is resolve-from good for? It seems to be pretty much createRequire (with more risks of breaking).

[kachkaev]

Closing this as there is a solution now (setting FORCE_BUILDER_TAG=canary in Vercel dashbaord) 🎉

[merceyz]

I'd argue that their solution isn't adding PnP support, it's forcibly disabling it :(

[kachkaev]

@merceyz oh I see: https://github.com/vercel/vercel/pull/5552 😔 Reopening