@forward "@material/animation" as mdc-animation-*; Can't find stylesheet to import.[codelab] <PLACE YOUR ISSUE TITLE HERE>

[melspence]

Hi, the mdc-103 project fails to compile when it hits @import "@material/ripple/mixins"

[robgoddes]

I have a similar issue... Does anyone have any advice how to fix this?

ERROR in ./home.scss
    Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
    
    @forward "@material/animation" as mdc-animation-*;
    ^
          Can't find stylesheet to import.
      ╷
    1 │ @forward "@material/animation" as mdc-animation-*;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      node_modules/@material/ripple/_mixins.import.scss 1:1  @import
      stdin 5:9                                              root stylesheet
          in /Users/robertgodino/Documents/GitHub/material-components-web-codelabs/mdc-101/starter/node_modules/@material/ripple/_mixins.import.scss (line 1, column 1)

[matthewgalang]

Faced the same issue with a error logged webpack: Failed to compile. after running npm start:

ERROR in ./home.scss
    Module build failed:
    @forward "@material/animation" as mdc-animation-*;
    ^
          Can't find stylesheet to import.
      ╷
    1 │ @forward "@material/animation" as mdc-animation-*;
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
      ╵
      node_modules/@material/ripple/_mixins.import.scss 1:1 

I installed the latest versions of packages (according to MDC Web Getting Started guide) then followed the workaround in this comment

Ultimately I changed the file paths for lines 1 - 4 at ./node_modules/@material/ripple/_mixins.import.scss to the following:

@forward "@material/animation/_index.scss" as mdc-animation-*;
@forward "@material/base/_index.scss" as mdc-base-*;
@forward "@material/feature-targeting/_index.scss" as mdc-feature-*;
@forward "@material/theme/_index.scss" as mdc-theme-*

that helped temporarily compile webpack and resolve the issue for my use of the MDC-103 course.

[robgoddes]

That worked Matthew, thank you. So, I’m assuming this is a bug with the MDC Ripple Component? It’s a great quick fix BUT every time I re-install the project (e.g. to a new server for instance), I would need to manually edit that file. Would you agree that the ripple component woudl be better served by a bug fix?

[robgoddes]

Sorry Matthew, I wasn’t very clear. What I meant to say is that when sharing an app, one can usually share it without the "node_modules" folder. Re-installing the app then recreates that "node_modules" folder which, in turn, overwrites the changes you suggested. So I would need to keep a log of my changes and edit that file every time?

[matthewgalang]

@robgoddes Glad my workaround helped you. However I'm unable to determine which party - MDC-103 Codelab Authors or MDC Developers - could be held responsible. Ultimately, since the codelab requires using the MDC Ripple package to complete the course it's hard to say whether the issue can be fixed in the codelab app or a bug fix with MDC Ripple package.

Obviously if one were to find error with @import "@material/ripple/mixins"; outside the codelabs app, I would agree that the bug fix on the MDC Ripple Package should resolve all of the above.

Unfortunately sharing an app without overwriting the workaround might require some modifications in version control though I have no experience with doing so with the node_modules folder. I hope for further use of the workaround to only assist with the completion of the course.

[arief135]

I solved it by changing @import "@material/ripple/mixins"; to @import "@material/ripple/mdc-ripple";

[johnmoroney]

@arief135 Worked like a charm! Thanks!

[KassioRF]

I solved it by changing @import "@material/ripple/mixins"; to @import "@material/ripple/mdc-ripple";

Great!! work to me. thanks!!!

[slackbeard]

@arief135 your solution worked for me too, thanks!

[Yifei-G]

Thanks for the help!!!

[juneX05]

that actually worked

[klgsnd]

I solved it by changing @import "@material/ripple/mixins"; to @import "@material/ripple/mdc-ripple";

Hi, thanks for the tip. Why does it work?

[tobinguyenn]

@import "@material/ripple/mdc-ripple";

Thanks for the help.

[equatorlounge]

brilliant, change mixins to @import "@material/ripple/mdc-ripple"; beauty of it all, damn i get so much hope on my 3rd tutorial !