[Ripple] using causes error (SassError: Can't find stylesheet to import.)

[amerllica]

Bug report

I saw a weird thing, when I write the example exactly look like the given link the @use '@material/button'; works well and the parser could see the _index.scss inside the node_modules/@material/button folder. but when I switch to your need, I mean @use "@material/ripple"; exactly like this link, the parser couldn't see the _index.scss inside the node_modules/@material/ripple folder and undoubtedly, it comes from the package.json of the ripple module. because in the package.json of ripple module there is "main": "dist/mdc.ripple.js" and "module": "index.js" which I don't know why the author declares it, we're forced to use @use "~@material/ripple/index"; just for this declarations.

Steps to reproduce

1. Exactly do what this link said.
2. instead of button use ripple, it comes from this link
3. now the app.scss is exactly like following:

@use "~@material/ripple";

.test {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

Actual behavior

when we run the npm run build command within webpack --mode=production command the bellow error appeared:

ERROR in ./app.scss
Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Can't find stylesheet to import.
  ╷
2 │ @use "~@material/ripple";
  │ ^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  /Users/amerllica/VimProjects/matGS/app.scss 2:1  root stylesheet
error Command failed with exit code 2.

Expected behavior

the ripple should work like button example of this link

Your Environment:

Software	Version(s)
MDC Web	^5.1.0
Browser	Google Chrome 80
Operating System	macOS Catalina

Additional context

Why the package.json of button component doesn't have "main" and "module" key/value but the ripple component has them? what's the usage?

Possible solution

For our need, omitting the "main" and "module" key/value from the package.json of the ripple component.

[asyncLiz]

This is a bug with sass-loader. Can you try the workaround mentioned in webpack-contrib/sass-loader#804 (comment)?

[amerllica]

Dear @asyncLiz, I already read this issue deeply. also I use webpackImporter with false value but it didn't help me. I wish you won't upset by reading my following words. I really guess you don't read my issue description. I just guess.

Because based on my information about issue #804 and its comments, my issue is not related to it. In this current issue I told about different implementation of ripple and button, something that makes the ripple document wrong.

[asyncLiz]

If webpackImporter is set to false, the import should not include webpack's tilde (~) notation.

- @use "~@material/ripple"; // webpackImporter: true
+ @use "@material/ripple"; // webpackImporter: false

It is difficult to debug build problems without a reproduction. Can you link to a repository with a working npm run build that has this error? That will be easier to diagnose than discussing abstractly.

[amerllica]

Dear @asyncLiz, In my last comment, I guess maybe you don't read my issue, now with your new comment, I pretty make sure you don't read it.

My issue is not exactly my issue or my implementation. it is an issue comes from Ripple. when I use @use for button I can easily write like below (all files extensions are scss no JavaScript file):

@use '@material/button/mdc-button';
@use '@material/button';

.foo-button {
  @include button.container-fill-color(darksalmon);
}

I mean the button.container-fill-color could be resolved, hence, the button truly imported by the @use '@material/button'; line.

BUT, when the @use '@material/ripple'; is written the ripple is not imported well so if I write following code it falls in an error:

@use "@material/ripple";

.my-surface {
  @include ripple.surface;
  @include ripple.radius-bounded;
  @include ripple.states;
}

It means the ripple.surface couldn't be resolved. when I change the @use "@material/ripple"; to @use "@material/ripple/index" as ripple; the ripple.surface could be resolved.

So, it means the package.json of ripple folder inside node_modules/@material/ripple has main and module key/value that mislead the _index.scss from default. definitely not related to sass-loader.

[asyncLiz]

Rest assured, I have read all of your comments thoroughly.

I just tried compiling your ripple code and it works fine with Sass. Sass does not use package.json keys to identify where files are. You can read more on how Sass resolves files at @use's "Finding the Module" section.

However, sass-loader when webpackImporter is true (the default value) does use package.json. You can read about that in webpack's Module Resolution. This is the bug I mentioned. If you set webpackImporter to false, it will not use webpack's built in import resolution and instead use Sass's module resolution.

You mentioned that you are already doing this, and since some of the Sass is working I'm assuming you're correctly using Dart's sass instead of node-sass. That's why I'm asking for a reproduction, so we can help you investigate any build issues.

As it stands, there is no build issue with ripple. The main and module keys in the package are for Javascript dependencies, not Sass.