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/