Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Nested mixins error #316

Closed
1 task
RichardWarfield opened this issue Mar 24, 2018 · 27 comments
Closed
1 task

Nested mixins error #316

RichardWarfield opened this issue Mar 24, 2018 · 27 comments

Comments

@RichardWarfield
Copy link

RichardWarfield commented Mar 24, 2018

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
Copy link
Author

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
Copy link

I have the same issue.

@matheus2740
Copy link

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

@matheus2740
Copy link

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
Copy link
Author

RichardWarfield commented Mar 26, 2018

@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
Copy link

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

@reachlakstar
Copy link

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

@reachlakstar
Copy link

@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
Copy link

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
Copy link

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
Copy link

matheus2740 commented Mar 26, 2018

@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
Copy link

@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
Copy link
Collaborator

nnixaa commented Mar 26, 2018

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

@reachlakstar
Copy link

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

@babak1199
Copy link

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
Copy link

matheus2740 commented Mar 26, 2018

@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
Copy link

babak1199 commented Mar 26, 2018

@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
Copy link

I had the same issue and after replace node-sass@4.8.3 by node-sass@4.8.1 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
Copy link
Contributor

huybn5776 commented Mar 27, 2018

@jesus-ibanez direct install node-sass@4.8.1 is work!! thanks~
npm i node-sass@4.8.1

angular/cli 1.7.3 and angular 5.2.9

@reachlakstar
Copy link

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

@huybn5776
Copy link
Contributor

huybn5776 commented Mar 27, 2018

@lakstap install node-sass@4.8.1 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 node-sass@4.7.?(forgotten) in node_modules folder, so i decide to install it explicitly, then the problem magically solve.

Special thanks to @jesus-ibanez !!

@reachlakstar
Copy link

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
Copy link

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

@reachlakstar
Copy link

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
Copy link
Collaborator

nnixaa commented Mar 28, 2018

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

@nnixaa
Copy link
Collaborator

nnixaa commented Apr 21, 2018

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

@Huang9495
Copy link

@huybn5776 Thanks, it's OK

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests