Does not Build or Run - Invalid CSS error

[jeremybradbury]

OS: Windows 10 NODE: 14.9

I assume this is windows only? (I'll try to confirm)

Steps to repro:

1. npm i
2. setup .env file
3. read about all the security warnings
4. npm audit fix or not
5. npm run dev or npm run build

[0] Module build failed (from ./node_modules/sass-loader/lib/loader.js):
[0]
[0] undefined
[0]               ^
[0]       Invalid CSS after "  margin: (math": expected expression (e.g. 1px, bold), was ".div($line-height-c"
[0]       in \graphiql\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\mixins\_nav-divider.scss (line 8, column 16)
[0] Error:
[0] undefined
[0]               ^
[0]       Invalid CSS after "  margin: (math": expected expression (e.g. 1px, bold), was ".div($line-height-c"
[0]       in \graphiql\node_modules\bootstrap-sass\assets\stylesheets\bootstrap\mixins\_nav-divider.scss (line 8, column 16)
[0]     at options.error (\graphiql\node_modules\node-sass\lib\index.js:291:26)
[0]  @ ./node_modules/bootstrap-loader/no-op.js (./node_modules/style-loader!./node_modules/css-loader!./node_modules/resolve-url-loader!./node_modules/sass-loader/lib/loader.js?sourceMap!./node_modules/bootstrap-loader/lib/bootstrap.styles.loader.js?{"bootstrapVersion":3,"preBootstrapCustomizations":"//graphiql//src//theme//variables.scss","bootstrapCustomizations":"//graphiql//src//theme//bootstrap.overrides.scss","useCustomIconFontPath":false,"extractStyles":false,"styleLoaders":["style","css","sass"],"styles":["mixins","normalize","print","glyphicons","scaffolding","type","code","grid","tables","forms","buttons","component-animations","dropdowns","button-groups","input-groups","navs","navbar","breadcrumbs","pagination","pager","labels","badges","jumbotron","thumbnails","alerts","progress-bars","media","list-group","panels","wells","responsive-embed","close","modals","tooltip","popovers","carousel","utilities","responsive-utilities"],"scripts":["button","dropdown","modal"],"configFilePath"://graphiql//.bootstraprc","bootstrapPath":"//graphiql//node_modules//bootstrap-sass","bootstrapRelPath":"..//bootstrap-sass"}!./node_modules/bootstrap-loader/no-op.js) 2:14-1315 21:1-42:3 22:19-1320
[0]  @ ./node_modules/bootstrap-loader/lib/bootstrap.loader.js!./node_modules/bootstrap-loader/no-op.js
[0]  @ ./node_modules/bootstrap-loader/loader.js?extractStyles
[0]  @ multi webpack-hot-middleware/client?path=http://127.0.0.1:3031/__webpack_hmr bootstrap-loader?extractStyles font-awesome-webpack!./src/theme/font-awesome.config.js ./src/client.js

[jeremybradbury]

I tried it using a WSL2 platform:

OS: Ubuntu 20 NODE: 16.14 it gave me errors about upstream dependency conflicts:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: graphqurl-graphiql@0.2.0
npm ERR! Found: graphql@14.7.0
npm ERR! node_modules/graphql
npm ERR!   graphql@"^14.3.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer graphql@"^0.6.0 || ^0.7.0 || ^0.8.0-b || ^0.9.0 || ^0.10.0 || ^0.11.0 || ^0.12.0 || ^0.13.0" from hasura-console-graphiql@0.1.0-alpha.1
npm ERR! node_modules/hasura-console-graphiql
npm ERR!   hasura-console-graphiql@"0.1.0-alpha.1" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See ~/.npm/eresolve-report.txt for a full report.

i then tried to install it this way: npm install --legacy-peer-deps

which didn't work, the error list isn't really worth noting.

then i tried: npm install --force

and node-sass fails to compile

[jeremybradbury]

I switched to node 14.9 (maintenance) on Ubuntu 20, it built and ran, but same error from ./node_modules/bootstrap-loader/no-op.js

So, I went all the way back to node 12.22.10 (out of maintenance next month)

same error.

Perhaps it's windows related? But it's still happening inside a WSL2 instance.