After migration from v12 to v13.2.24 SassError: Undefined mixin

[DevMarkDevelopment]

Description

How to resolve issue with undefined mixin. I read update guide but cant find answers to my problems.

• igniteui-angular version: 13.2.24
• angular: 15.2.10

Steps to reproduce

1. Update igniteui-angular to version 13.2.24
2. run application
3. see errors

Result

Receive complilation error in terminal:

Expected result

Run application normally

[kdinev]

@DevMarkDevelopment Please share your import code in the .scss file. Btw, igniteui-angular@13.x has dependency on angular@13.x. I see your Angular version is 15.x though. Also, when updating igniteui-angular did you do it using ng update?

[simeonoff]

Just to chime in on this one, there are automatic migrations introduced in Ignite UI for Angular 13.1.0 that should migrate all of the igx-* prefixed mixins and functions to non-igx prefixed ones. For instance igx-core became just core in 13.1.0 since we moved to Sass modules in this version. If you decided to manually update, i.e. didn't use ng update, you'd have to manually do all the work yourself.

You can see the full breadth of migrations that would have been applied to your Sass code automatically had you used ng update here.

[DevMarkDevelopment]

@simeonoff thanks for ng-update way it helped a lot, but now I am stopped on any idea how to solve this problem. I updated igniteui-angular to 15.1.30

[simeonoff]

The surface color has become required when constructing a custom palette in 15.1.x. Here's an example of how you should define palettes from 15.1.0 onwards.

Adjust the surface color based on whether you will be generating a light or dark theme. Pick a lighter surface color when generating palettes that will be used with a light schema (default is $light-material-schema).

Based on the screenshot you provided, yours should look something like that:

@use "node_modules/igniteui-angular/lib/core/styles/themes" as *;

$primary: rgb(53, 150, 205) !default;
$secondary: rgb(53, 150, 205) !default;
$tertiary: rgb(255, 19, 75) !default;
$surface: rgb(255, 255, 255); // <--- 

@include core();
@include typography();
@include theme(
    $palette: palette($primary, $secondary, $surface),
);

[DevMarkDevelopment]

@simeonoff once again you fixed my problem, but receive different I have no idea what is wrong here

[simeonoff]

It could have something to do with you app config. This is very cryptic now and I can't decipher what's going on based on the screenshot alone.

[DevMarkDevelopment]

Okay so where should I look for issues?

[kdinev]

@DevMarkDevelopment The error is no longer a sass one, it's in the typescript. Your editor should be highlighting a type you've imported could you inspect the specific component that you get the error in and see whether there's a highlighted import which is mistyped or anything of that sort. Also, if possible, share with us a screenshot of the imports in that file.

[DevMarkDevelopment]

Okay, this is personal library, made for personal use but it is important. In node_modules in this package imports look like that what is more in package.json here are dependencies for this package in whole application I use angular 15.2.10 ang igniteui-angular 15.1.30, and here are my dependencies. Also I use node in version 18.10.0

[kdinev]

@DevMarkDevelopment Remove the line

import * as i1 from 'igniteui-angular';

In fact remove all lines saying import * as X from ..., so the result would be:

import { Injectable, EventEmitter, Component, Input, Output, ViewChild, NgModule } from '@angular/core'; 
import { Subject } from 'rxjs';
import { 
    ConnectedPositioningStrategy, HorizontalAlignment, VerticalAlignment, NoopScrollStrategy,
    IgLayoutModule, IgxProgressBarModule, IgNavigationDrawerModule, IgxExpansionPanelModule,
    IgxIconModule, IgxRippleModule, IgDropDownModule, IgxToggleModule, IgxTooltipModule,
    IgxButtonModule, IgxCardModule
} from 'igniteui-angular';
import { NavigationEnd, RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';

[DevMarkDevelopment]

These imports are in node_modules file so I cant delete them because I receive different errors in console:

additionally, many js files in node modules have these lines, even in igniteui-angular

[kdinev]

OK, so the file you were showing is a lib that comes from node_modules, correct? You need to make changes to the lib then. See if it uses a type/class which has changed. The lib itself needs to be updated as well.

UPDATE: I took a second look. I didn't initially understand you're showing the usage of a lib. The lib has peerDeps on angular and igniteui-angular 12.x. The lib definitely needs to be updated to depend on angular and igniteui-angular 15.x.

[DevMarkDevelopment]

Okay so if I understand correctly the only thing that I have to do is to change in package.json versions of peerDependencies for angular and igniteui?

[kdinev]

Well, assuming nothing else needs to be adjusted to the new versions of @angular/core and igniteui-angular, then yes.