question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. ItΒ collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

No mixin named mdc-ripple-common error after adding @material/react-menu/index.scss

See original GitHub issue

I recently added @material/react-menu to my project, and imported the scss file into mine amongst others as per the README, like so:

@import "@material/react-menu/index.scss";
@import "@material/react-top-app-bar/index.scss";
@import "@material/react-material-icon/index.scss";

However, I get the following error:

@include mdc-ripple-common($query);
          ^
      No mixin named mdc-ripple-common
      in /Users/someone/gitrepos/myproject/my-ui/node_modules/@material/menu/_mixins.scss (line 35, column 12)

If I comment out the react-menu import:

// @import "@material/react-menu/index.scss";

then it all works, and icons have a ripple effect when I click them.

Is there something else I need to do to get these configured properly?

Contents of .env:

SASS_PATH=node_modules

Result of npm ls | grep material:

β”œβ”€β”¬ @material/react-material-icon@0.13.0
β”‚ β”œβ”€β”¬ @material/react-ripple@0.13.0
β”‚ β”‚ β”œβ”€β”¬ @material/dom@1.1.0
β”‚ β”‚ β”œβ”€β”¬ @material/ripple@1.1.0
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”œβ”€β”¬ @material/react-menu@0.13.0
β”‚ β”œβ”€β”¬ @material/menu@1.1.1
β”‚ β”‚ β”œβ”€β”¬ @material/base@1.0.0
β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1
β”‚ β”‚ β”œβ”€β”¬ @material/list@1.1.1
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/ripple@1.1.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.42.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/shape@1.1.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/typography@1.0.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/menu-surface@1.1.1
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/elevation@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.42.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/shape@1.1.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/ripple@1.1.0
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.42.0
β”‚ β”œβ”€β”¬ @material/react-list@0.13.0
β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”œβ”€β”€ @material/list@1.1.1 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/react-checkbox@0.10.0
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/checkbox@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/ripple@0.41.0
β”‚ β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@0.41.0
β”‚ β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@0.41.0
β”‚ β”‚ β”‚ β”‚ β”‚ └── @material/theme@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.40.1
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/selection-control@0.41.0
β”‚ β”‚ β”‚ β”‚ β”‚ └── @material/ripple@0.41.0 deduped
β”‚ β”‚ β”‚ β”‚ └── @material/theme@0.41.0
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/react-ripple@0.10.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/ripple@0.41.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/react-radio@0.10.0
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/form-field@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.40.1
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/selection-control@0.41.0 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@0.41.0
β”‚ β”‚ β”‚ β”‚ └── @material/typography@0.41.0
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/radio@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@0.41.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/ripple@0.41.0 deduped
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/selection-control@0.41.0 deduped
β”‚ β”‚ β”‚ β”‚ └── @material/theme@0.41.0
β”‚ β”‚ β”‚ β”œβ”€β”¬ @material/react-ripple@0.10.0
β”‚ β”‚ β”‚ β”‚ β”œβ”€β”€ @material/ripple@0.41.0 deduped
β”‚ β”‚ β”œβ”€β”€ @material/react-ripple@0.13.0 deduped
β”‚ β”œβ”€β”¬ @material/react-menu-surface@0.13.0
β”‚ β”‚ β”œβ”€β”€ @material/menu-surface@1.1.1 deduped
β”œβ”€β”¬ @material/react-top-app-bar@0.13.0
β”‚ β”œβ”€β”€ @material/react-ripple@0.13.0 deduped
β”‚ β”œβ”€β”¬ @material/top-app-bar@1.1.1
β”‚ β”‚ β”œβ”€β”¬ @material/animation@1.0.0
β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/elevation@1.1.0
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ └── @material/theme@1.1.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/ripple@1.1.0
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/animation@1.0.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/base@1.0.0 deduped
npmβ”‚ β”‚ β”‚ β”œβ”€β”€ @material/dom@1.1.0 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”‚ β”œβ”€β”€ @material/theme@1.1.0 deduped
β”‚ β”‚ β”œβ”€β”€ @material/rtl@0.42.0 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/shape@1.1.1
β”‚ β”‚ β”‚ └── @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/theme@1.1.0
β”‚ β”‚ β”‚ └── @material/feature-targeting@0.44.1 deduped
β”‚ β”‚ β”œβ”€β”¬ @material/typography@1.0.0
β”‚ β”‚ β”‚ └── @material/feature-targeting@0.44.1 deduped

Application was created by create-react-app and uses node-sass to watch and compile scss files.

Issue Analytics

  • State:closed
  • Created 4 years ago
  • Reactions:1
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

1reaction
moog16commented, Jun 11, 2019

released a patch 0.13.2

1reaction
moog16commented, Jun 10, 2019

@jonmanzo yes I also see that the @mateiral/ripple is resolving to 0.41.0. checkbox and radio should be updated to 0.13.0, which should resolve this issue.

Read more comments on GitHub >

github_iconTop Results From Across the Web

import - Suppress "no mixin named ..." in sass
In my scss file use mixin from angular-material: @include input-placeholder-color(red);. and I get an error: Error: no mixin named ...
Read more >
Sass @mixin and @include - W3Schools
A mixin is defined with the @mixin directive. Sass @mixin Syntax: @mixin name { property: value; property: value; ... }.
Read more >
error: no mixin named focus-border office ui fabric react.Issue ...
The color that we add at the end is defined in another SCSS called _semanticSlots.scss; instead of importing the whole thing (and introduceΒ ......
Read more >
Gulp error: no mixin named box-sizing in _scaffolding.scss
When running gulp I am getting this error: gulp-notify: [Gulp] Error: ... Gulp error: no mixin named box-sizing in _scaffolding.scss.
Read more >
Error no mixin named - sage - Roots Discourse
Hey folks, I'm trying to use a mixin to create a linear gradient for background, I check sass doc and search online but...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found