Nebular: Nested mixins error

[RichardWarfield]

Issue type

I'm submitting a ... (check one with "x")

• [ x ] bug report
• [ ] feature request

Issue description

Current behavior:
Error about nested mixins when building/running (yarn run start)

ERROR in ./node_modules/raw-loader!./node_modules/postcss-loader/lib??embedded!./node_modules/sass-loader/lib/loader.js??ref--8-3!./src/app/@theme/styles/styles.scss
Module build failed: 
  @mixin hover-border($color) {
        ^
      Mixins may not be defined within control directives or other mixins.
      in /home/richard/workspace/ngx-admin/node_modules/@nebular/theme/components/checkbox/_checkbox.component.theme.scss (line 8, column 10)

Expected behavior:
It should build and run.

Steps to reproduce:
Clone from git and yarn run start

Other information:

npm, node, OS, Browser
Yarn version 1.3.2 (also tried npm 5.6.0)
Node 9.8.0
Arch Linux x86

Angular, Nebular

    "@angular/animations": "~5.2.6",
    "@angular/common": "~5.2.6",
    "@angular/compiler": "~5.2.6",
    "@angular/core": "~5.2.6",
    "@angular/forms": "~5.2.6",
    "@angular/http": "~5.2.6",
    "@angular/platform-browser": "~5.2.6",
    "@angular/platform-browser-dynamic": "~5.2.6",
    "@angular/router": "~5.2.6",
...
    "@nebular/auth": "2.0.0-rc.6",
    "@nebular/theme": "2.0.0-rc.6",
    "@nebular/security": "2.0.0-rc.6",

[RichardWarfield]

Update: this seems to have something to do with Yarn. Oddly enough if I nuke node_modules then run npm install, the build succeeds. I don't know about sass to imagine how this error is possible.

Is yarn considered unsupported? If so I will close this issue.

[paul-xtremeapp]

I have the same issue.

[matheus2740]

Same problem. Nuking node_modules did not fix it for me. Any tips?

[matheus2740]

Update: Seems to be some sass compiler changes between ng-cli 1.7.1 and 1.7.3. reverting to 1.7.1 "fixed" the issue for me.

[RichardWarfield]

@matheus2740 did you try without yarn?

I think the nested syntax is actually not permitted in Sass (even if it did work in certain versions), meaning this may be a Nebular bug. See for example this recent issue.

[reachlakstar]

I dont have yarn, i am facing the issue, trying to resolve for past 4 hours

[reachlakstar]

@mixin hover-border($color) {
^
Mixins may not be defined within control directives or other mixins.

[reachlakstar]

@angular/cdk: 5.2.4
@angular/cli: 1.7.1
@angular/material: 5.2.4
@angular-devkit/build-optimizer: 0.3.2
@angular-devkit/core: 0.3.2
@angular-devkit/schematics: 0.3.2
@ngtools/json-schema: 1.2.0
@ngtools/webpack: 1.10.1
@schematics/angular: 0.3.2
@schematics/package-update: 0.3.2

[reachlakstar]

May i know how long this would take to fix, do you have any workaround because could not move forward because of this issue

[vitmaraliaga]

me too. may i know how long this would take to fix, do you have any workaround because could not move forward because of this issue

[matheus2740]

@lakstap , @valiaga try angular cli v1.7.1.

@RichardWarfield I haven't tried yarn, just npm, but this seems to be a problem with the angular cli version used (I think). Maybe the new sass compiler in 1.7.3 dont allow this syntax anymore. Try reverting to angular cli 1.7.1 (works for me).

[reachlakstar]

@matheus2740 yes my angular cli 1.7.1 please see above. lot more errors coming now.

Module build failed:
$theme: map-merge(map-get($nb-themes-non-processed, $default), $theme);
^
Argument $map1 of map-merge($map1, $map2) must be a map
in /node_modules/@nebular/theme/styles/_theming.scss (line 64, column 13)

[nnixaa]

Hey @lakstap, could you push a reproducible example somewhere? github + stackblitz would be nice.

[reachlakstar]

@nnixaa sorry, i just did npm install, ng serve throws this error

[babak1199]

I have the same issue.

Has been working on 2.0.0-rc.3 for a long time. When I cleaned and npm install today, got this error.

[matheus2740]

@lakstap sorry, I don't have much advice. Maybe try removing your global angular and reinstalling, maybe try other versions. you'll have to fiddle with it a bit.

[babak1199]

@nnixaa Actually, I tried a few of them:

• Remove node_modules and package-lock.json and started over
• Downgraded npm and tried (5.8.0 -> 5.7.6)
• Upgraded Angular CLI (1.6.2 -> 1.7.3)
• Rolled back my changes to where it was working

Unfortunately, none of them helped so far. I'll continue trying and will let you know of any progress I made. Thanks for the advice.

[jesus-ibanez]

I had the same issue and after replace [email protected] by [email protected] it works even with nodejs 8.10.0, npm 5.8.0, angular/cli 1.7.3 and angular 5.2.9, i hope this helps

[huybn5776]

@jesus-ibanez direct install [email protected] is work!! thanks~
npm i [email protected]

angular/cli 1.7.3 and angular 5.2.9

[reachlakstar]

@huybn5776 could you please share the steps, like npm install and then install node saas

[huybn5776]

@lakstap install [email protected] than everything is ok in my case.
Doesn't need to nuke node_modules or something.

My package.json doesn't contain node-sass before this, but i seen [email protected].?(forgotten) in node_modules folder, so i decide to install it explicitly, then the problem magically solve.

Special thanks to @jesus-ibanez !!

[reachlakstar]

did you get this Argument $map1 of map-merge($map1, $map2) must be a map

Backtrace:
node_modules/@nebular/theme/styles/_theming.scss:64, in function map-merge
node_modules/@nebular/theme/styles/_theming.scss:64, in function nb-register-theme

[reachlakstar]

Mixin error is gone, but i am getting bunch of this Argument $map1 of map-merge($map1, $map2) must be a map

[reachlakstar]

2 days could not resolve someone please throw some highlight

ERROR in ./src/app/@theme/layouts/two-columns/two-columns.layout.scss
Module build failed:
$theme: map-merge(map-get($nb-themes-non-processed, $default), $theme);
^
Argument $map1 of map-merge($map1, $map2) must be a map

Backtrace:
node_modules/@nebular/theme/styles/_theming.scss:64, in function `map-merge

[nnixaa]

Hey @lakstap, please post your package.json package-lock.json, npm and node version so that we can check.

[nnixaa]

Have just released 2.0.0-rc.7, should be fixed there.

[Huang9495]

@huybn5776 Thanks, it's OK