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_modulesigniteui-themingsassthemes_functions.scss 117:41 var-get()
node_modules@infragisticsigniteui-angularlibcorestylescomponentsbottom-nav_bottom-nav-theme.scss 125:16 bottom-nav()
node_modules@infragisticsigniteui-angularlibcorestylesthemesgenerators_base.scss 155:9 theme-internal()
node_modules@infragisticsigniteui-angularlibcorestylesthemesgenerators_base.scss 42:5 theme()
node_modules@infragisticsigniteui-angularlibcorestylesthemesgenerators_base.scss 667:5 light-theme()
srcstylesrhi-light-theme.scss 6:3 @import
srcstyles.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?