Support Yarn 2 PnP

[BeeeQueue]

Yarn Berry is currently in release candidate status, and it's a good idea to start thinking about supporting it, as can bring some complications due to Plug N' Play being the default.

The current issue for me is that the yarn install command has had breaking changes, and in a repo with the dependencies committed it should run yarn install --immutable --immutable-cache, and --check-cache if you want to validate the dependencies before deploying. Source

There will probably have to be some changes to how the scripts are run as well to make sure that they support plug n play. Read more

Other migration steps can be found here

---

For now, would it be possible to pass a custom install script in the configuration? It has been suggested in other discussions as well.

[styfle]

Thanks for the suggestion!

We might add an option for "Install Command" in Project Settings, however we would need a way to indicate that yarn 2 should be installed before the install script is run, or perhaps it could be apart of the script itself.

This is similar to the suggestion in #3896 which has a workaround you can use by modifying your Build Command.

[BeeeQueue]

Yarn 2 doesn't have to be installed in the current recommended setup - all yarn 2 files including yarn 2 are committed in the .yarn folder. You only need a recent yarn 1.x version installed.

Dependencies are also committed in here (.yarn/cache), so you don't actually have to run yarn install to run your application, but you can do it to check that all the dependencies haven't been messed with (yarn install --check-cache).

As far as I could tell the workaround sadly doesn't work as you never get to the postinstall when it fails on the install script.

You can check out my setup as an example: https://github.com/BeeeQueue/cr-proxy/tree/yarn-2

In should in theory be runnable after just checking out the branch.

[jakst]

Any updates on this? It would be very nice if Vercel supported the latest ecosystem tooling

[kachkaev]

Some relevant links I’ve seen so far:

• https://vercel.com/knowledge/does-vercel-support-yarn-2
• yarn2 Vercel build failed - No Next.js version could be detected in your project #5280
• yarn2 Vercel build failed - No Next.js version could be detected in your project #4910

My own attempt to upgrade an Vercel/Next app to Yarn v2: kachkaev/njt#29

[mormahr]

I just tried to migrate to yarn v2 and while installation step works, the vercel deployment service doesn't pick up that next is installed, because there's no node_modules.

Error: No Next.js version could be detected in your project. Make sure `"next"` is installed in "dependencies" or "devDependencies"

Locally on my machine I tried yarn dev and yarn build and both worked.
It should be noted that yarn v2 doesn't use node_modules anymore, so everything has to be started through yarn (because it configures node as neccesary) or be explicitly use the PnP API. While using yarn to start the frontend build shouldn't be a problem, i think the serverless routes need a little more work to be compatible. Iirc for those routes vercel uses ncc, so that tool might need to be made aware of pnp.

[armandabric]

There is another discussion about issue with Yarn 2 where the issue is detailed: #4910

[TooTallNate]

Hello friends. I wanted to notify you that we have added support for Yarn v2 in our official Runtimes (@vercel/next, @vercel/node and @vercel/static-build, specifically, see #5552). Currently the update is available on the "canary" release channel.

If you would like to try out the Yarn v2 support before it hits the stable release channel, you can run the following command if you are using the CLI:

$ vc -b FORCE_BUILDER_TAG=canary

If you are using the Git integration to trigger your deployments, then you can define the FORCE_BUILDER_TAG environment variable in your Project's environment variables setting on the Vercel dashboard.

Please let me know if it works for you or if you bump into any issues!

[osdiab]

As commented in the linked PR (#5552 (comment) ), seems like it’s not really yarn Berry being supported, but rather forcefully bypassing PnP. Is proper yarn v2 support in the Vercel pipeline? Thanks for the great platform nonetheless!

[jensmeindertsma]

@TooTallNate when will this feature become available on stable and the Git integration without any configuration?

[barbogast]

We are using yarn2 on Vercel without any issues with getServerSideProps and getStaticProps as well as revalidate: 1. Didn't do any particular setup, didn't notice any issues.

Edit: We are using PnP, seems to work perfectly fine.

[kidonng]

I think Vercel should make it clear that it works with Yarn 2+, as long as you don't use PnP.

And Vercel should also cache .yarn/cache if it exists.

[belgattitude]

@kidonng

Maybe we should just open a new issue about thissmile

Did yesterday, but could not find how to create a github issue, was redirected to support.

cacheFolder: "./node_modules/.yarn-cache"

Possibly yes, mmm node_modules/.xxx... there might be edge cases now or in the future... Let me know anyway, I might try it out too. But it would double the cache size somehow :(

Thanks

[belgattitude]

@BeeeQueue

If this works it would be better to set YARN_CACHE_FOLDER=./node_modules/.yarn-cache in the Vercel environment

Also possible to do it from the command line a bit like they did for pnpm vercel/next.js#16471 (comment)

[belgattitude]

@BeeeQueue @kidonng Thanks for your tips... I've ended up overriding install from vercel setings:

YARN_CACHE_FOLDER=./node_modules/.yarn-cache yarn install

PS/ prefer using env YARN_CACHE_FOLDER rather than yarn install --cache-folder as the later has been removed in yarn 3.0.0-rc.2

[belgattitude]

Edit: it seems to work now

But actually not 😄 , still some edge cases: yarnpkg/berry#2900 and belgattitude/nextjs-monorepo-example#48.

[belgattitude]

Caching in .next/cache seems to actually work and is not creating issues with yarn 3 (yarnpkg/berry#2900 (comment))

So you can override install by running YARN_CACHE_FOLDER=./.next/cache/yarn-cache yarn install.

And the magic happen:

Tested on a monorepo but should work for regular apps as well.

[belgattitude]

Hey Adam, Kid the YARN_CACHE_FOLDER=./node_modules/.yarn-cache is nice and works with pnpm, but actually does not work when no (or not yet) cache is present... I've opened an issue yarnpkg/berry#2900 and a repro belgattitude/nextjs-monorepo-example#48. My feeling about this: vercel should be able to detect yarn 2 and nodeLinker node_modules from .yarnrc.yml or metadadata keys in yarn.lock... A call to `yarn config get cacheFolder` would help in that case and could be used to upload the cache content. But I understand it would add more complexity to vercel. In the meantime, I'll try to set up a script to set YARN_CACHE_FOLDER only if a `nodes_modules/.yarn-state.yml` exists and hope yarn will allow this in the future. Thanks you for replies Happy week Sébastien

…

On Sat, May 15, 2021 at 12:41 PM Adam Haglund ***@***.***> wrote: If this works it would be better to set YARN_CACHE_FOLDER=./node_modules/.yarn-cache in the Vercel environment variables, so it only happens when when building it on the server and not on your computer — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#4223 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAB7NVS5KRHCQNLVFEJXM33TNZFVXANCNFSM4MXDBPPQ> .

[mareksuscak]

For those of you who're still struggling with Yarn v4, which changes the global cache behavior compared to v3, you have two options:

1. Override the "Install Command" in Settings -> General and use the following command:

   YARN_CACHE_FOLDER=node_modules/.yarn-cache YARN_ENABLE_GLOBAL_CACHE=false yarn install
   

2. Add the following 2 env vars in Settings -> Environment Variables:

   YARN_CACHE_FOLDER=node_modules/.yarn-cache
   YARN_ENABLE_GLOBAL_CACHE=false
   

   Tip: Just copy and paste the above vars, Vercel will automatically create two entries ;)

The longer explanation is that Yarn v4 forces the use of the global cache folder over the configured cache folder which means that it won't work correctly unless you disable the global cache in addition to setting the cache folder explicitly which is somewhat unintuitive.