Material-components-web: [mdc-ripple] Material Ripple Mixin import

[vidur-ui]

I'm at mdc-103 of the course and as I import the @import "@material/ripple/mixins"; I get the below error in the compilation:

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@materialripple_mixins.import.scss 1:1 @import
stdin 5:9 root stylesheet
in C:UsersVidurDesktopMDC-Webmaterial-components-web-codelabsmdc-103starternode_modules@materialripple_mixins.import.scss (line 1, column 1)
@ multi (webpack)-dev-server/client?http://localhost:8081 ./home.scss

And when I go to _mixins.import.scss file and comment all the import statements then it the build is successfully compiled but with the ripple mixin.

As I'm new to this so don't know much about it.
Kindly suggest some solutions
Thanks

[asyncLiz]

Hi! Please see https://github.com/webpack-contrib/sass-loader/issues/804 for the underlying problem. The workaround is to set webpackImporter: false in your sass-loader options.

    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
+       webpackImporter: false
      }
    },

Let us know if you're still running into problems! I updated https://github.com/material-components/material-components-web-codelabs/issues/124 to track the specific issue on the codelab.

[vidur-ui]

Hi! Please see webpack-contrib/sass-loader#804 for the underlying problem. The workaround is to set webpackImporter: false in your sass-loader options.

    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
+       webpackImporter: false
      }
    },

Let us know if you're still running into problems! I updated material-components/material-components-web-codelabs#124 to track the specific issue on the codelab.

yes it solved the problem
thanks

[ZlotaMoneta]

in my case setting webpackImporter: false does not resolve the problem.

ERROR in ./home.scss
Module build failed:
@forward "@material/animation" as mdc-animation-;
@forward "@material/base" as mdc-base-;
@forward "@material/feature-targeting" as mdc-feature-;
@forward "@material/theme" as mdc-theme- hide $mdc-theme-red-50, $mdc-theme-red-100, $mdc-theme-red-200, $mdc-theme-red-300, $mdc-theme-red-400, $mdc-theme-red-500, $mdc-theme-red-600, $mdc-theme-red-700, $mdc-theme-red-800, $mdc-theme-red-900, $mdc-theme-red-a100, $mdc-theme-red-a200, $mdc-theme-red-a400, $mdc-theme-red-a700, $mdc-theme-pink-50, $mdc-theme-pink-100, $mdc-theme-pink-200, $mdc-theme-pink-300, $mdc-theme-pink-400, $mdc-theme-pink-500, $mdc-theme-pink-600, $mdc-theme-pink-700, $mdc-theme-pink-800, $mdc-theme-pink-900, $mdc-theme-pink-a100, $mdc-theme-pink-a200, $mdc-theme-pink-a400, $mdc-theme-pink-a700, $mdc-theme-purple-50, $mdc-theme-purple-100, $mdc-theme-purple-200, $mdc-theme-purple-300, $mdc-theme-purple-400, $mdc-theme-purple-500, $mdc-theme-purple-600, $mdc-theme-purple-700, $mdc-theme-purple-800, $mdc-theme-purple-900, $mdc-theme-purple-a100, $mdc-theme-purple-a200, $mdc-theme-purple-a400, $mdc-theme-purple-a700, $mdc-theme-deep-purple-50, $mdc-theme-deep-purple-100, $mdc-theme-deep-purple-200, $mdc-theme-deep-purple-300, $mdc-theme-deep-purple-400, $mdc-theme-deep-purple-500, $mdc-theme-deep-purple-600, $mdc-theme-deep-purple-700, $mdc-theme-deep-purple-800, $mdc-theme-deep-purple-900, $mdc-theme-deep-purple-a100, $mdc-theme-deep-purple-a200, $mdc-theme-deep-purple-a400, $mdc-theme-deep-purple-a700, $mdc-theme-indigo-50, $mdc-theme-indigo-100, $mdc-theme-indigo-200, $mdc-theme-indigo-300, $mdc-theme-indigo-400, $mdc-theme-indigo-500, $mdc-theme-indigo-600, $mdc-theme-indigo-700, $mdc-theme-indigo-800, $mdc-theme-indigo-900, $mdc-theme-indigo-a100, $mdc-theme-indigo-a200, $mdc-theme-indigo-a400, $mdc-theme-indigo-a700, $mdc-theme-blue-50, $mdc-theme-blue-100, $mdc-theme-blue-200, $mdc-theme-blue-300, $mdc-theme-blue-400, $mdc-theme-blue-500, $mdc-theme-blue-600, $mdc-theme-blue-700, $mdc-theme-blue-800, $mdc-theme-blue-900, $mdc-theme-blue-a100, $mdc-theme-blue-a200, $mdc-theme-blue-a400, $mdc-theme-blue-a700, $mdc-theme-light-blue-50, $mdc-theme-light-blue-100, $mdc-theme-light-blue-200, $mdc-theme-light-blue-300, $mdc-theme-light-blue-400, $mdc-theme-light-blue-500, $mdc-theme-light-blue-600, $mdc-theme-light-blue-700, $mdc-theme-light-blue-800, $mdc-theme-light-blue-900, $mdc-theme-light-blue-a100, $mdc-theme-light-blue-a200, $mdc-theme-light-blue-a400, $mdc-theme-light-blue-a700, $mdc-theme-cyan-50, $mdc-theme-cyan-100, $mdc-theme-cyan-200, $mdc-theme-cyan-300, $mdc-theme-cyan-400, $mdc-theme-cyan-500, $mdc-theme-cyan-600, $mdc-theme-cyan-700, $mdc-theme-cyan-800, $mdc-theme-cyan-900, $mdc-theme-cyan-a100, $mdc-theme-cyan-a200, $mdc-theme-cyan-a400, $mdc-theme-cyan-a700, $mdc-theme-teal-50, $mdc-theme-teal-100, $mdc-theme-teal-200, $mdc-theme-teal-300, $mdc-theme-teal-400, $mdc-theme-teal-500, $mdc-theme-teal-600, $mdc-theme-teal-700, $mdc-theme-teal-800, $mdc-theme-teal-900, $mdc-theme-teal-a100, $mdc-theme-teal-a200, $mdc-theme-teal-a400, $mdc-theme-teal-a700, $mdc-theme-green-50, $mdc-theme-green-100, $mdc-theme-green-200, $mdc-theme-green-300, $mdc-theme-green-400, $mdc-theme-green-500, $mdc-theme-green-600, $mdc-theme-green-700, $mdc-theme-green-800, $mdc-theme-green-900, $mdc-theme-green-a100, $mdc-theme-green-a200, $mdc-theme-green-a400, $mdc-theme-green-a700, $mdc-theme-light-green-50, $mdc-theme-light-green-100, $mdc-theme-light-green-200, $mdc-theme-light-green-300, $mdc-theme-light-green-400, $mdc-theme-light-green-500, $mdc-theme-light-green-600, $mdc-theme-light-green-700, $mdc-theme-light-green-800,
$mdc-theme-light-green-900, $mdc-theme-light-green-a100, $mdc-theme-light-green-a200, $mdc-theme-light-green-a400, $mdc-theme-light-green-a700, $mdc-theme-lime-50, $mdc-theme-lime-100, $mdc-theme-lime-200, $mdc-theme-lime-300, $mdc-theme-lime-400, $mdc-theme-lime-500, $mdc-theme-lime-600, $mdc-theme-lime-700, $mdc-theme-lime-800, $mdc-theme-lime-900, $mdc-theme-lime-a100, $mdc-theme-lime-a200, $mdc-theme-lime-a400, $mdc-theme-lime-a700, $mdc-theme-yellow-50, $mdc-theme-yellow-100, $mdc-theme-yellow-200, $mdc-theme-yellow-300, $mdc-theme-yellow-400, $mdc-theme-yellow-500, $mdc-theme-yellow-600, $mdc-theme-yellow-700, $mdc-theme-yellow-800, $mdc-theme-yellow-900, $mdc-theme-yellow-a100, $mdc-theme-yellow-a200, $mdc-theme-yellow-a400, $mdc-theme-yellow-a700, $mdc-theme-amber-50, $mdc-theme-amber-100, $mdc-theme-amber-200, $mdc-theme-amber-300, $mdc-theme-amber-400, $mdc-theme-amber-500, $mdc-theme-amber-600, $mdc-theme-amber-700, $mdc-theme-amber-800, $mdc-theme-amber-900, $mdc-theme-amber-a100, $mdc-theme-amber-a200, $mdc-theme-amber-a400, $mdc-theme-amber-a700, $mdc-theme-orange-50, $mdc-theme-orange-100, $mdc-theme-orange-200, $mdc-theme-orange-300, $mdc-theme-orange-400, $mdc-theme-orange-500, $mdc-theme-orange-600, $mdc-theme-orange-700, $mdc-theme-orange-800, $mdc-theme-orange-900, $mdc-theme-orange-a100, $mdc-theme-orange-a200, $mdc-theme-orange-a400, $mdc-theme-orange-a700, $mdc-theme-deep-orange-50, $mdc-theme-deep-orange-100, $mdc-theme-deep-orange-200, $mdc-theme-deep-orange-300, $mdc-theme-deep-orange-400, $mdc-theme-deep-orange-500, $mdc-theme-deep-orange-600, $mdc-theme-deep-orange-700, $mdc-theme-deep-orange-800, $mdc-theme-deep-orange-900, $mdc-theme-deep-orange-a100, $mdc-theme-deep-orange-a200, $mdc-theme-deep-orange-a400, $mdc-theme-deep-orange-a700, $mdc-theme-brown-50, $mdc-theme-brown-100, $mdc-theme-brown-200, $mdc-theme-brown-300, $mdc-theme-brown-400, $mdc-theme-brown-500, $mdc-theme-brown-600, $mdc-theme-brown-700, $mdc-theme-brown-800, $mdc-theme-brown-900, $mdc-theme-grey-50, $mdc-theme-grey-100, $mdc-theme-grey-200, $mdc-theme-grey-300, $mdc-theme-grey-400, $mdc-theme-grey-500, $mdc-theme-grey-600, $mdc-theme-grey-700, $mdc-theme-grey-800, $mdc-theme-grey-900, $mdc-theme-blue-grey-50, $mdc-theme-blue-grey-100, $mdc-theme-blue-grey-200, $mdc-theme-blue-grey-300, $mdc-theme-blue-grey-400, $mdc-theme-blue-grey-500, $mdc-theme-blue-grey-600, $mdc-theme-blue-grey-700, $mdc-theme-blue-grey-800, $mdc-theme-blue-grey-900;
@forward "./index" as mdc-* hide $mdc-dark-ink-opacities, $mdc-fade-in-duration, $mdc-fade-out-duration, $mdc-light-ink-opacities, $mdc-pressed-dark-ink-opacity, $mdc-pressed-light-ink-opacity, $mdc-translate-duration, mdc-core-styles, mdc-common, mdc-surface, mdc-radius-bounded, mdc-radius-unbounded, mdc-target-selector, mdc-target-common, mdc-keyframes-;
@forward "./index" as mdc-ripple-* hide $mdc-ripple-states-wash-duration, mdc-ripple-states-base-color, mdc-ripple-states-opacities, mdc-ripple-states-hover-opacity, mdc-ripple-states-focus-opacity, mdc-ripple-states-focus-opacity-properties-, mdc-ripple-states-press-opacity, mdc-ripple-states, mdc-ripple-states-activated, mdc-ripple-states-selected, mdc-ripple-states-interactions-, mdc-ripple-states-opacity, mdc-ripple-states-opacities-;

^
      Can't find stylesheet to import.
  ╷
1 │ @forward "@material/animation" as mdc-animation-*;
  │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  ╵
  node_modules\@material\ripple\_mixins.import.scss 1:1  @import
  stdin 6:9                                              root stylesheet
      in C:\Users\AdamDukata\Documents\_temp\material-components-web-codelabs-master\material-components-web-codelabs-master\mdc-101\starter\node_modules\@material\ripple\_mixins.import.scss (line 1, column 1)
 @ multi (webpack)-dev-server/client?http://localhost:8080 ./home.scss

Does someone have some advice?

[ShakhGani]

Hi! Please see webpack-contrib/sass-loader#804 for the underlying problem. The workaround is to set webpackImporter: false in your sass-loader options.

    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
+       webpackImporter: false
      }
    },

Let us know if you're still running into problems! I updated material-components/material-components-web-codelabs#124 to track the specific issue on the codelab.

Hi!
This option [webpackImporter: false] didn't solve problem. I catch error yet. Any other advise?
Thanks.

[robmarano]

Hi! Please see webpack-contrib/sass-loader#804 for the underlying problem. The workaround is to set webpackImporter: false in your sass-loader options.

    {
      loader: 'sass-loader',
      options: {
        includePaths: ['./node_modules'],
        implementation: require('dart-sass'),
        fiber: require('fibers'),
+       webpackImporter: false
      }
    },

Let us know if you're still running into problems! I updated material-components/material-components-web-codelabs#124 to track the specific issue on the codelab.

Hi!
This option [webpackImporter: false] didn't solve problem. I catch error yet. Any other advise?
Thanks.

I too am unable to get that change to solve the problem.

any other ideas?
tia,
/rob

[asyncLiz]

Our recommendation is to completely avoid this bug by switching to the @use syntax instead of @import.

You can mix @use and @import, so if you don't want to upgrade your entire project you only need to switch the @material/* library imports to @use.

// Old syntax, can cause index forward bug with sass-loader
// @import "@material/ripple/mixins";
// @include mdc-ripple-common();

@use "@material/ripple";
@include ripple.common();

[slackbeard]

The @use syntax worked for me. Can someone update the MDC-103 tutorial so others can avoid this error?
EDIT: I spoke too soon. The @use syntax avoids the error, but the color theme seems to be ignored now
EDIT 2: The solution by @arief135 here worked for me: https://github.com/material-components/material-components-web-codelabs/issues/139#issuecomment-663077779