Sass loader cannot resolve modules from Yarn v2 PNP

Bug report

Describe the bug

Next.js does not resolve SCSS that is imported by my dependencies:

1. styles/home.module.scss uses @material/elevation (this works fine).
2. @material/elevation uses @material/animation (this fails).

To Reproduce

Steps to reproduce the behavior, please provide code snippets or a repository:

1. First, clone this repository and CD inside:

$ git clone https://github.com/nicholaschiang/with-sass
$ cd with-sass/

1. Then, make sure you have Yarn installed then run:

$ yarn

1. Finally, start the development server by running:

$ yarn dev

Error

You’ll notice that when you run yarn dev the Next.js server starts up properly but the sass-loader is unable to resolve my dependency’s imports.

It seems to import the @material/elevation package just fine:

// styles/home.module.scss
@use '@material/elevation

But it doesn’t seem to be able to import @material/animation for the @material/elevation package:

error - ./styles/home.module.scss (./.yarn/$$virtual/css-loader-virtual-393ee7c517/0/cache/css-loader-npm-3.5.3-0f886851e6-910936f0ac.zip/node_modules/css-loader/dist/cjs.js??ref--5-oneOf-3-1!./.yarn/$$virtual/next-virtual-4df8b3b97e/0/cache/next-npm-9.5.1-e14f31e6e9-effa9056b8.zip/node_modules/next/dist/compiled/postcss-loader??__nextjs_postcss!./.yarn/cache/resolve-url-loader-npm-3.1.1-cf1a268137-7b113ac9e6.zip/node_modules/resolve-url-loader??ref--5-oneOf-3-3!./.yarn/$$virtual/sass-loader-virtual-dbafe3ebab/0/cache/sass-loader-npm-8.0.2-f0d209ad64-e23d9b308f.zip/node_modules/sass-loader/dist/cjs.js??ref--5-oneOf-3-4!./styles/home.module.scss)
SassError: Can't find stylesheet to import.
   ╷
23 │ @use "@material/animation/variables";
   │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  .yarn/cache/@material-elevation-npm-7.0.0-aaa8862010-5ea26d080e.zip/node_modules/@material/elevation/_variables.scss 23:1  @forward
  .yarn/cache/@material-elevation-npm-7.0.0-aaa8862010-5ea26d080e.zip/node_modules/@material/elevation/_index.scss 1:1       @use
  /home/nchiang/repos/with-sass/styles/home.module.scss 1:1                                                                                                                  root stylesheet

I’ve had this error before when using Next.js with MWC but was able to fix it by specifying an includePaths configuration in next.config.js like so:

// next.config.js
const path = require('path');

module.exports = {
  sassOptions: {
    includePaths: [
      path.resolve(__dirname, 'node_modules'),
    ],
  },
};

Now, I’m not sure how to tell sass-loader to use Yarn PNP’s module resolution.

Expected behavior

Next.js should be able to resolve the Yarn PNP modules.

System information

• OS: Ubuntu 18.04.2
• Version of Next.js: 9.5.1
• Version of Node.js: 14.7.0

[merceyz]

Fixed in https://github.com/vercel/next.js/pull/16970

[alexander-akait]

Fixed, ETA is tomorrow, I found other strange resolution bug (very rare case), anyway you need to update sass-loader to latest, it will not work with sass-loader@8