Next.js: Yarn v2 compatibility

[PabloSzx]

Bug report

Describe the bug

Next.js is supposed to be compatible with yarn v2, but when I try to use it on the basic example from create-next-app it doesn't work at all.

To Reproduce

I made a repository only with the code that comes with create-next-app cli command, it has a couple different branches:

• master: 9.2.1
• canary: canary
• e2e-workflow-version: ^9.1.5-canary.0

https://github.com/PabloSzx/nextjs-yarn-v2

Expected behavior

To work

Screenshots

System information

• OS: [Linux, Windows, Ubuntu WSL]
• Version of Next.js: [9.2.1, 9.1.5]

[klummy]

TLDR: Add "private-next-pages": "link:./pages", to your dependencies in your package.json.

This issue is likely because of the way alias behaves differently in Yarn2. You can work around this by using linking

Under the hood, next.js aliases the pages folder so this simply translates that for Yarn 2.

Note - you will (and should) clean this up when it is next.js is updated to handle this

_Edit: I initially used portals which worked fine until I had to update a new package so back to links 🤷‍♂._

[Ciantic]

I get completly different error, it first says webpack is missing, and then it fails to find next command, even though it's already running!

yarn run dev   
[ wait ]  starting the development server ...
[ info ]  waiting on http://localhost:3000 ...
{ Error: A package is trying to access a peer dependency that should be provided by its direct ancestor but isn't

Required package: webpack (via "webpack")
Required by: mini-css-extract-plugin@virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3
Require stack: ...
command not found: next

[goszczynskip]

After creating fresh next js app via yarn create next-app and running yarn dev I'm getting error complaining about chalk.

yarn run dev
ready - started server on http://localhost:3000
Error: next tried to access chalk, but it isn't declared in its dependencies; this makes the require call ambiguous and unsound.

Required package: chalk (via "chalk")
Required by: next@virtual:2509f25549fb3398fb7e95f4acc454dfce2b867ae1391f90906ada47b1b86c4d4fa6c5624b14d801aea5b3436f9cda67b5f0565bca86c3570fd453a97cc37a48#npm:9.4.2 (via /C:/workspace/yarn-workspaces-test/.yarn/$$virtual/next-virtual-acd26089a2/0/cache/next-npm-9.4.2-4410e5c57d-3.zip/node_modules/next/dist/build/w
ebpack/plugins/webpack-conformance-plugin/checks/)

[yellowspaceboots]

@goszczynskip Yarn 2 is very picky about packages declaring dependencies. This looks related to yarn error YN0002. They give you a few options on how to handle it but I have been using Yarn 2's packageExtentions in a .yarnrc.yml file. This will tell Yarn 2 to have Next declare chalk as a dependency without you having to wait on someone else. I do find that a lot fo the time when I map a dependency like this and then re-run yarn it uncovers another similar issue with a different package. I just add the packExtentions until yarn stops yelling at me about them and then everything seems to work as expected. Hope this helps!

yarnPath: ".yarn/releases/yarn-berry.js"
packageExtensions:
    "next@*":
        dependencies:
            "chalk": "*"

[goszczynskip]

Root cause was that one of nextjs dependencies wasn't declaring chalk in it's package.json. I see they've added it so my comment is obsolete now. But thanks for detailed explanation, I've done just as you said. It's temporary fix but works for me.

[0x80]

I ran into a similar issue:

Build error occurred
Error: mini-css-extract-plugin tried to access webpack (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

Required package: webpack (via "webpack")
Required by: mini-css-extract-plugin@virtual:1d9168c037c08506cad690e29fd976d3b38a884a672b631ce328ba655d35796417317af720f12d57f0e7cd3ab2976fc12b60f56238e7a04aa9afa12f9ac77003#npm:0.4.3 (via /Users/me/Development/myproject/.yarn/$$virtual/mini-css-extract-plugin-virtual-cebe464182/0/cache/mini-css-extract-plugin-npm-0.4.3-a350360081-0a0010769e.zip/node_modules/mini-css-extract-plugin/dist/)
Ancestor breaking the chain: @zeit/next-css@npm:1.0.1

Adding webpack to the packageExtensions in the yarn file didn't seem to help this

[0x80]

Correction: it does work, but you need to specify the correct module that needs the dependency which in this case was not nextjs:

packageExtensions:
    "mini-css-extract-plugin@*":
        dependencies:
            "webpack": "*"

[memark]

What's the status on this? Is it working now?

[Timer]

Closing this because we now E2E test Yarn v2 compat. Please upgrade to the latest canary version!