Vue2 - Error: PostCSS received undefined instead of CSS string - node.js

i have this problem when trying to compile a Vue2 project
Syntax Error: Error: PostCSS received undefined instead of CSS string
# ./src/assets/sass/main.scss 4:14-233 14:3-18:5 15:22-241
# ./src/main.js
# multi (webpack)-dev-server/client?http://192.168.1.202:8080&sockPath=/sockjs-node (webpack)/hot/dev-server.js ./src/main.js
I have tried to rebuild the sass-loader with no success.
My node version is v16.6.1
My NPM version is 7.21.0
Webpack is 5.1.2 and the sass-loader version is 10.2.0
This is a VUE2 project and all started when i started a new Vue3 project and i had to upgrade the vue/cli but i cannot understand how to go back locally (if this is the problem)

Try it
npm install node-sass
or
npm rebuild node-sass
I got answer for here

Solved by first uninstalling node-sass:
yarn remove node-sass
And then installing sass instead:
yarn add -D sass

I also faced the same error and after downgrading the node version it was fixed.

I resolved this issue by downgrading my version of "node-sass" to "^4.14.1":
npm install node-sass#4.14.1

solved by switching to node v15.14.0

Hey, I was following a tutorial about VueJS, and I had the same error, tried to rebuild node-sass it didn't work.
Then I saw that the lang used in the style balise was SCSS (in the App.vue) , I changed it to CSS and it worked. :)

This error, Error: PostCSS received undefined instead of CSS string is being thrown by sass-loader.
One solution would be to reinstall sass-loader. By using the following steps, the sass compile error should be fixed.
Steps for npm & yarn
! Note: If you have node-sass installed, you will need to reinstall it as well, by using the following commands:
# npm
npm uninstall sass-loader node-sass
npm install sass-loader node-sass --save-dev
# yarn
yarn remove sass-loader node-sass
yarn add sass-loader node-sass --dev
To reinstall sass-loader run these commands:
# npm
npm uninstall sass-loader
npm install sass-loader --save-dev
# yarn
yarn remove sass-loader
yarn add sass-loader --dev

Related

updating react-scripts version from 3.4.0 to 5.0.0 causing Type Error: Cannot read properties of undefined (reading 'getStackAddendum')

I am trying to upgrade react-scripts from 3.4.0 to 5.0.0 and it thrown issue when I do 'npm run start', Type Error: Cannot read properties of undefined (reading 'getStackAddendum').
I am trying to resolve but unable to get rid of the issue. Does package installation order matters here or any dependency packages I need to look for while doing 'npm install'.
we are using
nodejs 16.14.0
package.json
react 17.0.2
react-dom 17.0.2
really appreciate any suggestions.
As mentioned in the changelog run
npm install --save --save-exact react-scripts#5.0.0
or
yarn add --exact react-scripts#5.0.0
and do not forget to delete your node_modules folder and reinstall your dependencies by running npm install (or yarn) if you encounter errors after upgrading

Facing error while running ng serve command

I am trying to run ng serve command for my project , i tried npm i command for many times, but it showing same error continously.
Node version is : v16.13.2
Npm version is : 8.4.1
Image is of error
Your Issue
The error you facing with running the application is issue with the SCSS compilation. Certain packages are missing related scss
Try - npm rebuild node-sass --force
If still doesn't work out, freshly recreate the project and follow standard installation of libraries related to scss.
Helping Link:
Angular won't run my ng serve - Sass Loader error
Node Sass does not yet support your current environment: Linux 64-bit with false
Standard Angular Issue Resolution
Delete package-lock.json.
Clear cache - npm cache clean --force or npm cache clean -f
Delete node_modules folder
Reinstall dependencies - npm install
Run the application - ng serve
Please follow below steps to resolve this issue which worked in my case.
Delete node-sass folder (..\ AppData\Roaming\npm-cache\node-sass), node-modules folder and package-lock.json
Clear cache - npm cache clean --force
Reinstall node-sass globally - npm i node-sass#4.13.1 --unsafe-perm=true --allow-root
Reinstall project dependencies - npm install -no-package-lock
Start application - ng serve or npm start
This should update your node-sass global version. (please update version that you need to have as per your project)

npm install throwing error in node-sass

node-sass#2.1.1 install /home/user/Documents/project/node_modules/node-sass
> node scripts/install.js
WARN invalid config loglevel="notice"
Can not download file from https://raw.githubusercontent.com/sass/node-sass-binaries/v2.1.1/linux-x64-node-8.2/binding.node
> node-sass#2.1.1 postinstall /home/user/Documents/project/node_modules/node-sass
> node scripts/build.js
module.js:487
throw err;
^
Error: Cannot find module '/home/user/Documents/project/node_modules/node-sass/node_modules/pangyp/bin/node-gyp'
at Function.Module._resolveFilename (module.js:485:15)
at Function.Module._load (module.js:437:25)
at Function.Module.runMain (module.js:605:10)
at startup (bootstrap_node.js:158:16)
at bootstrap_node.js:575:3
Build failed
added 2186 packages in 42.166s
I tried so far:
npm rebuild
npm rebuild node-sass
npm uninstall -g node-sass
rm -rf node_module
Replace node-sass with sass, which is a pure-JS implementation and is less prone to build errors as it doesn't use node-gyp.
npm uninstall node-sass
npm i -D sass
It can then be added to package.json as follows, for example:
{
"scripts": {
"build:css": "sass --style compressed --update src/scss:static/css",
"watch:css": "sass --watch src/scss:static/css",
}
}
You need to do next steps and it should work:
rm -rf node_modules package-lock.json
npm install --saveDev node-sass#4.5.3
npm install
Voila :)
by using yarn run:
yarn add node-sass
Removed package-lock.json, installed Python 2.7, added an env variable for python path.
Ran npm install.
Voila !
node-sass has minimum dependency according to the version of node installed in your system. You can find out the minimum version required here
Use
Node : v14.16.0
node-sass: ^4.14.1
it works for me
This question is old, but if you arrive here in 2022 or later, then this info may be useful:
node-sass is deprecated. Now you should use sass.
That's why the answer given by Usama Muhammad works. Hope this helps.
Sources:
https://www.npmjs.com/package/node-sass
https://www.npmjs.com/package/dart-sass
The minimum version with Node 8 support is 4.5.3. Offhand, I don't think 2.x will support anything above Node 0.12, which is EOL.
Delete package-lock.json
Remove 'node-sass' dependency from your package.json
run npm install
run npm gulp-sass --save-dev
run npm i -d sass
run npm start
I have found I get node-sass errors when trying to install over a corporate proxy. The first solution is to ensure your .npmrc file has proxy allowance.
.npmrc
# Try removing reference to registry, as sometimes your local corporate registry of node_modules may not include node-sass
# // registry=https://....
# note if using special characters in pass, encode them: eg: h#ppy = h%40ppy
strict-ssl=false
proxy=http://<username>:<pass>#proxyhost:<port>
https-proxy=http://<uname>:<pass>#proxyhost:<port>
NODE_TLS_REJECT_UNAUTHORIZED = 0
Then in command line before running any install
set NODE_TLS_REJECT_UNAUTHORIZED = 0
Zip node-binding files from node-sass github site in order to download them over corporate network.
Example:
https://github.com/inspiraller/node-sass-bindings
Add manually in package.json : "node-sass": "4.13.0"
and update package.json in terminal npm install

"libsass bindings not found. Try reinstalling node-sass"

So today I was trying to install MeepBot for StreamMe, and I ran into the error that says: "'libsass' bindings not found. Try reinstalling 'node-sass'." I reinstalled it like a million times. I have tried: "npm un/install --save-dev node-sass," "npm rebuild node-sass," etc. Can someone please give me an answer to my problem?
Picture: http://prntscr.com/axbxu8
P.S. keep in mind, I am using CentOS 6.
According to node-sass project's README.md only binaries for "popular platforms"(i.e. Windows/Mac) are included and you may need to build for other platforms like CentOS.
Here are roughly the steps (reading the readme would give you a better idea):
- cd to the node-sass directory within your project source.
- node scripts/install.js
- node scripts/build.js
Should see a message like Binary is fine; exiting.
Try to run npm rebuild node-sass again and it should work!
have you tried reinstalling everything? rm -rf node_modules; npm i. i've had to do that multiple times before.
otherwise, npm rebuild node-sass should work unless there are multiple versions of node-sass in your dependency tree - then maybe not. are you using npm v3+?
I would suggest try upgrading your gcc compiler as node-sass uses gcc to compile. And then try this -
npm rebuild node-sass
If that doesn't work then try runing this code (you must be using node version 4 or above).
npm install -g n
rm -R node_modules/
npm uninstall --save-dev node-sass
npm install --save-dev node-sass#2
npm install
npm -g install node-gyp#3
npm rebuild node-sass
If you are using multiple version of node then you will have to run npm rebuild node-sass every time you change node version.
You can also use gulp-sass npm install gulp-sass#2 if you want.
I was facing this issue. In my case the parent package.json was referring to new version of node-sass but the version of gulp-sass was referring to old node-sass. As soon as I updated gulp-sass to latest version, and ran 'npm rebuild node-sass', issue was gone.

libsass bindings not found when using node-sass in nodejs

I want to use the node-sass module in my node.js v0.12 application to benefit from the performance of libsass.
I executed npm i node-sass to install the module, no errors so far.
Now the mess starts:
If I just open the REPL in a terminal to try out node-sass then everything works fine but if I include it in my project files and run node myfile.js then I get the following error message:
Error: `libsass` bindings not found. Try reinstalling `node-sass`?
The module's description at npmjs.com states that there might be a problem with resolving #!/usr/bin/env node under Ubuntu and how to fix this but that is not the case on my machine.
I could not find anything useful so I hope that you might help me.
I'm using node v0.12.2 under Ubuntu 14.10.
P.S.: I already tried to reinstall node-sass but without success. Nothing changes.
If you're using node 4.x or later then you need to reinstall gulp-sass with:
npm uninstall --save-dev gulp-sass
npm install --save-dev gulp-sass#2
You’ve probably tried to reinstall node-sass while using
npm install node-sass
or
npm uninstall node-sass
npm install node-sass
But node-sass is a C version of Sass. You have to use npm rebuild:
npm rebuild node-sass
I fixed this issue by deleting the existing /node_modules folder and running npm update
This is the only solution that worked for me,
sudo npm install -g n
sudo n 0.12.7
npm install node-sass#2
sudo npm -g install node-gyp#3
npm rebuild node-sass
This workaround (http://forum.ionicframework.com/t/error-running-gulp-sass/32311/20) worked form me.
Starting with this setup:
Cordova CLI: 5.3.3
Gulp version: CLI version 3.9.0
Gulp local: Local version 3.9.0
Ionic Version: 1.1.0
Ionic CLI Version: 1.6.5
Ionic App Lib Version: 0.3.9
ios-deploy version: Not installed
ios-sim version: 5.0.1
OS: Mac OS X Yosemite
Node Version: v4.1.1
Xcode version: Xcode 6.4 Build version 6E35b
I've found a solution to avoid to use 'sudo' command. We need before to fix npm permissions following this: https://docs.npmjs.com/getting-started/fixing-npm-permissions and fixing permissions for Node here: http://mawaha.com/permission-fix-node-js/ After this we can check and reinstall software without 'sudo' for npm, n or ionic.
I followed this step:
npm install -g n
rm -R node_modules/
npm install node-sass#3.3.3
npm -g install node-gyp#3
npm uninstall gulp-sass
npm install gulp-sass#2
npm rebuild node-sass
ionic setup sass
Why node-sass#3.3.3? Because it works with latest ionic version: https://github.com/driftyco/ionic/pull/4449
Combining the two answers above worked for me, plus additions:
sudo npm uninstall --save gulp-sass
npm install --save gulp-sass#2
npm update
npm rebuild node-sass
I have solved this to create the right directory with the specified binding.node file. You can download the bindings from github
https://github.com/sass/node-sass-binaries
Look in the error message the path where it tries to find the binding. In my case:
C:\Users\Martijn\Documents\node_modules\gulp-sass\node_modules\node-sass\vendor\win32-x64-46
So I create this map win32-x64-46 and copy the binding from github in.
My solution was to downgrade to v0.10.25 (try sudo n 0.10.25 if you use n)
For me, this issue was caused in my build system (Travis CI) by doing something kind of dumb in my .travis.yml file. In effect, I was calling npm install before nvm use 0.12, and this was causing node-sass to be built for 0.10 instead of 0.12. My solution was simply moving nvm use out of the .travis.yml file’s before_script section to before the npm install command, which was in the before_install section.
This was a Node version issue for me, try using nvm to backtrack your version to something like: 0.10.32. This worked for me. I was running 4.2.2
I solved this problem by updating my gcc from 4.4.x to 4.7.x
No need for sudo or re-installations. This has always worked for me:
nvm use 0.12.2
This is the steps I undertook to fix my issue.
I updated my node manually to the latest version
Reinstalled node-sass
npm install node-sass
3.npm audit fix to fix certain vulnerabilities.
`npm audit fix`
5.npm install node-sass
`npm install node-sass`
worked and compiled properly thereafter.
I apologize if anything related to my answer isn't right. I'm just a beginner.
Hope it works for you

Resources