Can't build project because of SCSS(!). $map: null is not a map

[akopian-artur-25]

Description

`./src/styles.scss - Error: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$map: null is not a map.
   ╷
63 │     $s: map.get($theme, 'selector');
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\igniteui-theming\sass\themes\_mixins.scss 63:9                                             css-vars()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\components\button\_button-theme.scss 231:5  button()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 163:9          theme-internal()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 42:5           theme()
  _infragistics.scss 22:1                                                                                 @import
  src\styles.scss 3:9                                                                                     root stylesheet

./src/styles.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
No argument named $grays.
   ┌──> src\styles\_infragistics.scss
8  │   $default-palette: palette(
   │ ┌───────────────────^
9  │ │   $primary: $blue,
10 │ │   $secondary: $dark-blue,
11 │ │   $surface: #fff,
12 │ │   $error: $red,
13 │ │   $success: $green,
14 │ │   $warn: #797673,
15 │ │   $info: $sky,
16 │ │   $grays: #000
17 │ │ );
   │ └─^ invocation
   ╵
   ┌──> node_modules\igniteui-theming\sass\color\_functions.scss
49 │   @function palette(
   │ ┌───────────^
50 │ │     $primary,
51 │ │     $secondary,
52 │ │     $surface,
53 │ │     $gray: null,
54 │ │     $info: #1377d5,
55 │ │     $success: #4eb862,
56 │ │     $warn: #faa419,
57 │ │     $error: #ff134a,
58 │ │     $variant: null
59 │ │ ) {
   │ └─^ declaration
   ╵
  _infragistics.scss 8:19  palette()
  _infragistics.scss 8:19  @import
  src\styles.scss 3:9      root stylesheet
`

igniteui-angular version: ^16.0.27*

Started reproduce after Angular 15 -> 16 update

package.json

`
{
  "name": "client-app",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve --o",
    "build": "ng build",
    "build:prod": "ng build --prod --configuration=production",
    "build:stage": "ng build --prod --configuration=staging",
    "build:test": "ng build --prod --configuration=test",
    "watch": "ng build --watch --configuration development",
    "test": "ng test"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^16.2.12",
    "@angular/cdk": "^16.2.13",
    "@angular/common": "^16.2.12",
    "@angular/compiler": "^16.2.12",
    "@angular/core": "^16.2.12",
    "@angular/forms": "^16.2.12",
    "@angular/platform-browser": "^16.2.12",
    "@angular/platform-browser-dynamic": "^16.2.12",
    "@angular/router": "^16.2.12",
    "@infragistics/igniteui-angular": "^16.0.27",
    "@ngneat/until-destroy": "^10.0.0",
    "blob-util": "^2.0.2",
    "bootstrap": "^4.5.3",
    "codelyzer": "^6.0.2",
    "file-saver": "^2.0.5",
    "hammerjs": "^2.0.8",
    "moment": "^2.29.4",
    "ngx-file-drop": "^16.0.0",
    "ngx-toastr": "^16.2.0",
    "ngx-ui-loader": "^13.0.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "tslint": "^6.1.3",
    "web-animations-js": "^2.3.2",
    "zone.js": "~0.13.3"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^16.2.11",
    "@angular-eslint/builder": "16.2.0",
    "@angular-eslint/eslint-plugin": "16.2.0",
    "@angular-eslint/eslint-plugin-template": "16.2.0",
    "@angular-eslint/schematics": "16.2.0",
    "@angular-eslint/template-parser": "16.2.0",
    "@angular/cli": "^16.2.11",
    "@angular/compiler-cli": "^16.2.12",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "@typescript-eslint/eslint-plugin": "5.3.0",
    "@typescript-eslint/parser": "5.3.0",
    "eslint": "^7.3.0",
    "igniteui-theming": "^4.0.1",
    "jasmine-core": "~4.0.0",
    "karma": "^6.3.17",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~5.1.6"
  }
}

`

Theme configuration

@use '@infragistics/igniteui-angular/theming' as *;

@import "variables";
@import "colors";

@include core();
@include typography($font-family: "Segoe UI");

$default-palette: palette(
  $primary: $blue,
  $secondary: $dark-blue,
  $surface: #fff,
  $error: $red,
  $success: $green,
  $warn: #797673,
  $info: $sky,
  $gray: #000
);

@include theme($default-palette);

I already have stylePreprocessorOptions settings

            "stylePreprocessorOptions": {
              "includePaths": [
                "node_modules",
                "src/styles"
              ]
            },

[PooSham]

@akopian-artur-25 Did you fix it? Why is it marked as completed?

[PooSham]

I got this issue when updating to v17

[akopian-artur-25]

@PooSham I have fixed it. But I don't know in which way.

For me, it looked as scss files cached somehow, that's why I've got same error every rebuild.

I tried to do migration 15->16 again, from scratch, I did the same changes again and issue gone as result.

[PooSham]

@akopian-artur-25 I have tried to redo the process, as well as remove node_module and .package-lock and then reinstalled all packages. I also removed the .angular folder. Nothing works :/ Oh well, maybe I need to reboot my computer.

[akopian-artur-25]

@PooSham Everything you've listed I did as well. Didn't help until 'remigration' in magic morning 😸

[PooSham]

Still can't fix it. My output isn't exactly the same though, the issue arises from the elevations/raised variants of the palette, rather than grays as in your case. Here's my output:

./src/styles/main.scss?ngGlobalStyle - Error: Module build failed (from ./node_modules/mini-css-extract-plugin/dist/loader.js):
HookWebpackError: Module build failed (from ./node_modules/sass-loader/dist/cjs.js):
$map: null is not a map.
   ╷
63 │     $s: map.get($theme, 'selector');
   │         ^^^^^^^^^^^^^^^^^^^^^^^^^^^
   ╵
  node_modules\igniteui-theming\sass\themes\_mixins.scss 63:9                                             css-vars()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\components\button\_button-theme.scss 231:5  button()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 163:9          theme-internal()
  node_modules\@infragistics\igniteui-angular\lib\core\styles\themes\generators\_base.scss 42:5           theme()
  src\styles\base\_infragistics.scss 106:1                                                                @import
  src\styles\main.scss 13:9                                                                               root stylesheet

I can see that access to the raised theme has been removed (which isn't populated by earlier functions), but that change hasn't made it to v17.0.11. Does @simeonoff know when these changes will be added to the npm package?

[simeonoff]

@PooSham 'raised' will be renamed to 'contained' in the 17.1 release of Ignite UI for Angular. Automatic migrations will be applied when updating via ng update. For your problem, I believe you have manually installed igniteui-theming and it updated it to version 4.0.x in your app. Ignite UI for Angular 17.0.x is only compatible with igniteui-theming 3.x.x; Take a look at your package-lock.json. My recommendation is to delete both node_modules and package-lock.json. Take a look at your package.json file and if you have any direct dependencies on igniteui-theming, just delete them and then do npm install. Should resolve any issues.

[PooSham]

@simeonoff Yes, downgrading to igniteui-theming fixed it. I thought I had tried that already, but I suppose I didn't remove node_modules that time. Thank you very much!

[simeonoff]

Closing as it seems that all issues have been resolved.

[ricardosaracino]

Where in the documentation is this?

[simeonoff]

Where in the documentation is this?

Nice catch, we will be adding a paragraph in the docs stating that users shouldn't explicitly be installing the theming package as it is internally encapsulated in the package.