Next.js: Node-sass not found (tho using sass) with Yarn 2

[chrisands]

Bug report

Describe the bug

Trying to import scss file and but got an error:

Error: sass-loader tried to access node-sass (a peer dependency) but it isn't provided by its ancestors; this makes the require call ambiguous and unsound.

next.config.js

module.exports = {
  sassOptions: {
    implementation: require('sass'),
  },
}

The bug doesn't appear if I use npm instead of yarn v2 or/and if node version is 12.18.0 instead of 14.4.0.

To Reproduce

1. Manually create nextjs project
2. Use node 14.4.0 and yarn v2
3. Add next.config.js like above
4. Install sass with yarn v2
5. Import scss file
6. Run yarn dev

Expected behavior

Run without error by using dart-sass implementation.

System information

• OS: OSX 10.15.5 (19F101)
• Version of Next.js: 9.4.4
• Version of Node.js: 14.4.0

Additional context

Using typescript and yarn v2 workspaces, but I think that's not the case.

[chrisands]

/cc @arcanis
maybe there is something with nodejs 14 resolution and how yarn v2 handles it. Not sure.

[arcanis]

From what I see in the webpack documentation, it seems that implementation is expected to be an options, not a sassOptions:

https://webpack.js.org/loaders/sass-loader/#implementation

The node-sass error is also probably caused by Next missing an optional peer dependency on node-sass (transitive peer dependencies must be explicit).

[chrisands]

Adding sass and node-sass in next package peerDependencies resolves the issue. Should I make PR, @Timer ?

[chrisands]

As for a temporary solution it is possible to use packageExtensions from yarn v2:

packageExtensions:
  '[email protected]':
    peerDependencies:
      sass: '^1.26.0'

[Timer]

We really need to add proper Yarn 2 E2E tests to the Next.js repo so we don't keep regressing on these features! Could you try to write that test suite?

[chrisands]

I'll try to do this next week.

[nicholaschiang]

I'm migrating over to Yarn V2 and had the same issue.

[nicholaschiang]

@chrisands it looks like you can just add sass as an optional peer dependency to next and it should fix this issue.

[merceyz]

Re: https://github.com/vercel/next.js/issues/14157#issuecomment-644187097
@Timer I looked into it but the use of the gist protocol stopped me from getting it to work since v2 doesn't support that yet. Would it be possible to change this to one of the supported protocols (https://yarnpkg.com/features/protocols)?
https://github.com/vercel/next.js/blob/636672755004c756eefcddb5d4ccabbc1855e75a/packages/next/package.json#L208