Undefined mixin error when defining a material theme with Angular 15

Question

I updated my project to Angular 15 (15.2.1) and use the latest Material Design package (15.2.1) as well. When defining the theme like described in the documentation I get the error:

./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
SassError: Undefined mixin.
   ╷
54 │   @include theme.validate-theme-styles($light-theme, $theme);
   │   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  @material/linear-progress/_linear-progress-theme.scss 54:3                 theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 14:3  -palette-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 35:7  @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 193:5    @content
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 233:3    disable-mdc-fallback-declarations()
  node_modules/@angular/material/core/mdc-helpers/_mdc-helpers.scss 192:3    using-mdc-theme()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 33:3  color()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 60:7  @content
  node_modules/@angular/material/core/theming/_theming.scss 403:3            private-check-duplicate-theme-styles()
  node_modules/@angular/material/progress-bar/_progress-bar-theme.scss 54:3  theme()
  node_modules/@angular/material/core/theming/_all-theme.scss 47:5           @content
  node_modules/@angular/material/core/theming/_theming.scss 403:3            private-check-duplicate-theme-styles()
  node_modules/@angular/material/core/theming/_all-theme.scss 44:3           all-component-themes()
  src/styles.scss 24:1                                                       root stylesheet

My code to define the theme is copied from the documentation: https://material.angular.io/guide/theming#applying-a-theme-to-components

@use '@angular/material' as mat;

@include mat.core();

$my-primary: mat.define-palette(mat.$indigo-palette, 500);
$my-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);

$my-theme: mat.define-light-theme((
 color: (
   primary: $my-primary,
   accent: $my-accent,
 ),
 typography: mat.define-typography-config(),
 density: 0,
));

@include mat.all-component-themes($my-theme);

It seems the problem comes from mat.all-component-themes

Salesroom

Do you have @material/theme/_theme.scss in you node modules ? Does it contain a mixin named validate-theme-styles ? – Weston

@MatthieuRiegler yes the file contains the reference to the mixin – Salesroom

@MatthieuRiegler for clarification: the file @material/linear-progress/_linear-progress-theme.scss is containing the reference to theme/_theme.scss, containing the mixin. – Salesroom

Answer 1

The problem was an incompatible package that was used in the project. I debugged by removing dependency by dependency, starting with ones that were material or component related.

Salesroom

I am facing the exact same issue. Which dependency did you end up removing? – Calise

For us it was some material datetimepicker which we replaced in the end – Salesroom

Thank you for sharing, in our case it was @material/list component that we removed and replaced which fixed our problem. – Calise