4

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?

Improve this question
1
  • Which version of node-sass you have in your package.json ? Commented Jan 17, 2020 at 5:47

4 Answers 4

Reset to default
3

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/

Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

0

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.

Improve this answer

Comments

0

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
Improve this answer

Comments

0

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)
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.