Angular 16 - 'The theme for #{map.get($map, 'name')} does not contain #{$key}';

I am in the process of trying to upgrade from Angular version 15 to 16. After updating the necessary packages I am getting the error:

HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js): Undefined variable. ╷ 117 │ @error 'The theme for #{map.get($map, 'name')} does not contain #{$key}'; │ ^^^^ ╵ node_modules\igniteui-theming\sass\themes_functions.scss 117:41 var-get() node_modules@infragistics\igniteui-angular\lib\core\styles\components\bottom-nav_bottom-nav-theme.scss 125:16 bottom-nav() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 155:9 theme-internal() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 42:5 theme() node_modules@infragistics\igniteui-angular\lib\core\styles\themes\generators_base.scss 667:5 light-theme() src\styles\rhi-light-theme.scss 6:3 @import src\styles.scss 23:9 root stylesheet

My styles.scss is set as below:

//rhi styles

@import './styles/rhi';

// igx-color function has been renamed to color which is the same as the bootstrap function. Declare all infragistics colours before importing bootstrap.
// Bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

// IMPORTANT: Make sure you always include igx-core first!
@include core();

// Configure application fonts with igx-typography
@include typography(
$font-family: "'Montserrat', sans-serif",
$type-scale: $rhi-type-scale
);

// Initialise ignite ui themes
@include theme($rhi-color-palette);

//Import rhi themes
@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


The issue seems to be specifically with:

$rhi-color-palette

in rhi.scss I have:

// Import the IgniteUI themes library first
@use '@infragistics/igniteui-angular/theming' as *;
@forward '@infragistics/igniteui-angular/theming';

// CSS Reset, comment out if not required or using a different module
@import 'node_modules/minireset.css/minireset';

// Import our defined palettes and schemas
@import './igx-palettes';
@import './igx-type-scales.scss';
.....


in igx-palettes.scss we have:

$rhi-color-palette: palette(
$primary: $rhi-blue-color,
$secondary: $rhi-pink-color,
$surface: #fff,
$info: color($light-material-palette, 'info'),
$success: color($light-material-palette, 'success'),
$error: color($light-material-palette, 'error'),
$warn: color($light-material-palette, 'warn'),
);

$rhi-color-palette-dark: palette(
$primary: $rhi-pink-color,
$secondary: $rhi-pink-color,
$gray: $white-color,
$surface: #222,
$info: color($light-material-palette, 'info'),
$success: color($light-material-palette, 'success'),
$error: color($light-material-palette, 'error'),
$warn: color($light-material-palette, 'warn'),
);


and then in the light-theme.scss there is:

.rhi-light-theme {
@include light-theme($rhi-color-palette);


.....

and in dark-theme.scss:

.rhi-dark-theme {
@include dark-theme($rhi-color-palette-dark);


.....

I know it's to do with $rhi-color-palette as if I remove these lines from styles.scss:

@include theme($rhi-color-palette);

@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


then the application will build.

And then also within the light theme file and dark theme files, if I remove the lines:

@include light-theme($rhi-color-palette);
@include dark-theme($rhi-color-palette-dark);


then I can still include the lines

@import './styles/rhi-light-theme';
@import './styles/rhi-dark-theme';


in styles.scss and it will build. So the issue seems to stem to how the palette is set up but I'm not sure what needs to change?

Continue reading...