Error When Installing node-sass for Vue JS Project

Question

When running an 'npm install' on a VueJS project I run into the following error:

error: no matching constructor for initialization of 'v8::String::Utf8Value'
  v8::String::Utf8Value string(value);
                        ^      ~~~~~
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3046:5: note: candidate constructor not viable: no known conversion from 'v8::Local<v8::Value>' to
      'const v8::String::Utf8Value' for 1st argument
    Utf8Value(const Utf8Value&) = delete;
    ^
/Users/webdevwolf/.node-gyp/12.14.1/include/node/v8.h:3039:5: note: candidate constructor not viable: requires 2 arguments, but 1 was provided
    Utf8Value(Isolate* isolate, Local<v8::Value> obj);
    ^
1 error generated.
make: *** [Release/obj.target/binding/src/create_string.o] Error 1
gyp ERR! build error 
gyp ERR! stack Error: `make` failed with exit code: 2
gyp ERR! stack     at ChildProcess.onExit (/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/lib/build.js:262:23)
gyp ERR! stack     at ChildProcess.emit (events.js:223:5)
gyp ERR! stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:272:12)
gyp ERR! System Darwin 19.2.0
gyp ERR! command "/usr/local/bin/node" "/usr/local/lib/node_modules/node-sass/node_modules/node-gyp/bin/node-gyp.js" "rebuild" "--verbose" "--libsass_ext=" "--libsass_cflags=" "--libsass_ldflags=" "--libsass_library="
gyp ERR! cwd /usr/local/lib/node_modules/node-sass
gyp ERR! node -v v12.14.1
gyp ERR! node-gyp -v v3.8.0
gyp ERR! not ok 
Build failed with error code: 1
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] postinstall: `node scripts/build.js`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the [email protected] postinstall script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

To get round this I've tried the following:

• Updating Node to the latest stable version
• Updating sass
• Running an install for the 4.11.0 version of Sass

I'm getting super frustrated with it now and I'm not even sure what this error even means - does anyone have any idea on how to fix this at all?

Answer 1

I was having a similar issue with Node version 16 and Vue 3. The problem seems to be node-sass related and is incompatible with node version 16 or something. Other people have mentioned using Node 14 with no problems.

This error would happen even when I ran vue create app clicked on the manual configuration option and choose to have node-sass setup / configured. It would start downloading but freeze when it came time to download node-saas and exit with an error.

My solution was to download Vue 3 without the node-sass option and then after it was done installing, npm i -D sass sass-loader@7 instead of npm i -D node-sass

you also need to add this to you vue.config.js file in the root directory.

// vue.config.js
module.exports = {
  css: {
    loaderOptions: {
      sass: {
        implementation: require('sass'),
      },
    },
  }
}

Thats all you should need to get scss running. Just dont forget to add the lang="scss" attribute the the script tags.

<style lang="scss">
.....
</style>

I found my solution from this article: https://www.priestch.com/replace-node-sass-with-dart-sass-in-vue-cli3-based-project/

Answer 2

I fixed this with - npm install node-sass

If that fails then

1. delete your node_modules folder
2. npm install
3. npm install node-sass

Sometimes when I come back to an old vue project after using the latest version of sass I get this error. And cleaning out the modules and re-installing the correct version for my project always seems to fix it.

Answer 3

If you are struggling with

• node 16.13.2
• @vue/cli 4.5.15
• vue create to create a new Vue 3 project
• and you want to use node-sass but you keep having errors

Don't add a css preprocessor to your project with vue create

Create your project with vue create then use this commands (and exactly this commands)

npm i -D sass-loader@^10.0.0
npm i node-sass@^6.0.1 --unsafe-perm

Answer 4

There is an issue with vue and nodejs 16 issued here. node-sass (4.11) bundled with vue-cli 4.5 is incompatible with nodejs 16. What I did:

• upgrade the vue-cli to the latest (currently 5.0.4)
• create a new project (in my case with vue ui)
• EDIT: delete old node_modules folder
• compare my old package.json with the new and took over the vue specific imports
• compare the configuration files for vue, typescript, jest, cypress, eslint (or whatever you use)
• EDIT: Backup or commit before executing next command, because it will change your config files. Then run vue add @vue/cli-plugin-eslint (npm install will fail)
• NOT absolutely necessary: start npm-gui and updated all packages to compatible versions (do not know how to do this without npm-gui) Caution: compatible is not always newer.

Here is the generated package.json for the project (TS, ESLint, Jest, Cypress, Sass, Babel, Vuex) without Router:

{
  "name": "vuenew",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:e2e": "vue-cli-service test:e2e",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "core-js": "^3.8.3",
    "register-service-worker": "^1.7.2",
    "vue": "^3.2.13",
    "vuex": "^4.0.0"
  },
  "devDependencies": {
    "@types/jest": "^27.0.1",
    "@typescript-eslint/eslint-plugin": "^5.4.0",
    "@typescript-eslint/parser": "^5.4.0",
    "@vue/cli-plugin-babel": "~5.0.0",
    "@vue/cli-plugin-e2e-cypress": "~5.0.0",
    "@vue/cli-plugin-eslint": "~5.0.0",
    "@vue/cli-plugin-pwa": "~5.0.0",
    "@vue/cli-plugin-typescript": "~5.0.0",
    "@vue/cli-plugin-unit-jest": "~5.0.0",
    "@vue/cli-plugin-vuex": "~5.0.0",
    "@vue/cli-service": "~5.0.0",
    "@vue/eslint-config-standard": "^6.1.0",
    "@vue/eslint-config-typescript": "^9.1.0",
    "@vue/test-utils": "^2.0.0-0",
    "@vue/vue3-jest": "^27.0.0-alpha.1",
    "babel-jest": "^27.0.6",
    "cypress": "^8.3.0",
    "eslint": "^7.32.0",
    "eslint-plugin-import": "^2.25.3",
    "eslint-plugin-node": "^11.1.0",
    "eslint-plugin-promise": "^5.1.0",
    "eslint-plugin-vue": "^8.0.3",
    "jest": "^27.0.5",
    "sass": "^1.32.7",
    "sass-loader": "^12.0.0",
    "ts-jest": "^27.0.4",
    "typescript": "~4.5.5"
  }
}

EDIT2: We found some errors, which seems to be some sort of vue3 <-> TS thing. after upgrading vue-cli to 5.0.4, tsc reports an error in a .ts (merge.ts from vue-splide) file inside node_modules. Switching back to TS 4.5.5 solved this issue.

EDIT:

In my project, I can upgrade:

• typescript to 4.6.3 (current latest)
• @vue/eslint-config-typescript to 10.0.0 (current latest)