npm ERR! npm install failed - vue.js

I'm trying to install package.json file using the command npm install, but I'm getting the following error. (node-gyp version: 9.2.0, node version: 16.17.1)
npm ERR! gyp ERR! cwd C:\Users\work\project\node_modules\node-sass
npm ERR! gyp ERR! node -v v16.17.1
npm ERR! gyp ERR! node-gyp -v v3.8.0
npm ERR! gyp ERR! not ok
npm ERR! Build failed with error code: 1
there's my package.json:
{
"name": "PROJECT",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"lint": "vue-cli-service lint",
"start": "node server.js",
"build": "vue-cli-service build"
},
"dependencies": {
"#fortawesome/fontawesome-svg-core": "^1.2.27",
"#fortawesome/vue-fontawesome": "^0.1.9",
"axios": "^0.21.1",
"bootstrap": "^4.4.1",
"bootstrap-vue": "^2.12.0",
"browserslist": "^4.14.3",
"core-js": "^3.6.4",
"jquery": "^3.5.1",
"moment": "^2.24.0",
"vue": "^2.6.11",
"vue-router": "^3.1.5",
"vuex": "^3.1.2"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^4.2.0",
"#vue/cli-plugin-eslint": "^4.2.0",
"#vue/cli-plugin-router": "^4.2.0",
"#vue/cli-plugin-vuex": "^4.2.0",
"#vue/cli-service": "^4.2.0",
"#vue/eslint-config-prettier": "^6.0.0",
"babel-eslint": "^10.0.3",
"eslint": "^6.7.2",
"eslint-plugin-prettier": "^3.1.1",
"eslint-plugin-vue": "^6.1.2",
"node-sass": "^4.13.1",
"prettier": "^1.19.1",
"sass-loader": "^8.0.2",
"vue-template-compiler": "^2.6.11",
"webpack": "^4.42.1"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended",
"#vue/prettier"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions"
],
"optionalDependencies": {}
}
I've been researching for hours trying to figure out this issue, but i have no clue at all.
Thanks in advance!

Related

Why is there an error when installing vuex?

Tell me, I understand that there is a problem in the versions, but how to solve it?
I have tried:
npm cache clean --force commands
npm install -g npm-install-peers
npm install --legacy-peer-deps
Install with npm install --save-dev vuex#next gives me this error
My package.json file:
"name": "",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint",
"serve:standalone": "vue-cli-service serve --mode standalone"
},
"dependencies": {
"core-js": "^3.6.5",
"devextreme": "21.2.5",
"devextreme-vue": "21.2.5",
"single-spa-vue": "^2.1.0",
"vue": "^2.6.11"
},
"devDependencies": {
"#storybook/vue": "^6.4.14",
"#vue/cli": "^4.5.15",
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"node-sass": "^6.0.1",
"sass-loader": "^10",
"eslint-plugin-vue": "^6.2.2",
"vue-cli-plugin-single-spa": "~3.1.2",
"vue-template-compiler": "^2.6.11"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
That is because you're trying to install Vuex#4, which is only compatible with Vue#3. However, your project is using Vue#2 instead.
You will need to decide which Vue version you want to use. Since you mentioned that you only want to use Vue2, you need to install the Vuex#3 instead:
npm install vuex#3

npm ERR! missing script: start Vue.js Error

When I install Vuetable. ( npm install vuetable-2#next --save ) I get the following error:
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_51_20_971Z-debug.log
PS x\Desktop\dd\frontend> npm start serve
npm ERR! missing script: start
npm ERR! A complete log of this run can be found in:
npm ERR! x\AppData\Roaming\npm-cache\_logs\2021-08-23T08_52_32_164Z-debug.log
I tried to remove the node_modules folder and install it again. Also I tried, npm clean cache --force but still get the same error. How can I fix it?
This is my package.json file :
{
"name": "architectui-vue-pro",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#ckeditor/ckeditor5-build-classic": "^11.2.0",
"#ckeditor/ckeditor5-vue": "^1.0.1",
"#fancyapps/fancybox": "^3.5.7",
"#fortawesome/fontawesome-svg-core": "^1.2.17",
"#fortawesome/free-solid-svg-icons": "^5.8.1",
"#fortawesome/vue-fontawesome": "^0.1.6",
"animate-sass": "^0.8.2",
"apexcharts": "^3.6.7",
"bootstrap": "^4.3.1",
"bootstrap-vue": "^2.0.0-rc.18",
"chart.js": "^2.8.0",
"countup.js": "^1.9.3",
"css-file-icons": "0.0.7",
"es6-promise": "^4.2.6",
"increase-memory-limit": "^1.0.6",
"leaflet": "^1.4.0",
"linearicons": "^1.0.1",
"material-design-icons-iconfont": "^4.0.5",
"mockjs": "^1.0.1-beta3",
"moment": "^2.24.0",
"moment-timezone": "^0.5.31",
"node-sass": "^4.11.0",
"pdfjs": "^2.3.8",
"pe7-icon": "^1.0.4",
"perfect-scrollbar": "^1.4.0",
"popper.js": "^1.15.0",
"quill": "^1.3.6",
"sass-loader": "^7.1.0",
"sweetalert": "^2.1.2",
"toastr": "^2.1.4",
"v-mask": "^1.3.3",
"vee-validate": "^2.2.3",
"vue": "^2.6.10",
"vue-apexcharts": "^1.3.4",
"vue-chartjs": "^3.4.2",
"vue-clipboards": "^1.2.4",
"vue-color": "^2.7.0",
"vue-country-flag": "^1.1.0",
"vue-countup-v2": "^2.0.0",
"vue-cropperjs": "^3.0.0",
"vue-element-loading": "^1.1.1",
"vue-fancybox": "^1.0.3",
"vue-form-wizard": "^0.8.4",
"vue-full-calendar": "^2.7.0",
"vue-js-toggle-button": "^1.3.2",
"vue-ladda": "0.0.15",
"vue-multiselect": "^2.1.4",
"vue-notifications": "^0.9.0",
"vue-pdf": "^4.0.8",
"vue-perfect-scrollbar": "^0.1.0",
"vue-quill-editor": "^3.0.6",
"vue-rate": "^2.2.0",
"vue-router": "^3.0.5",
"vue-select": "^2.6.4",
"vue-session": "^1.0.0",
"vue-sidebar-menu": "^3.7.0",
"vue-slick": "^1.1.15",
"vue-slider-component": "^2.8.16",
"vue-sparklines": "^0.1.9",
"vue-spinkit": "^1.7.12",
"vue-spinner": "^1.0.4",
"vue-sticky-directive": "0.0.8",
"vue-tabs-with-active-line": "^1.1.4",
"vue-textarea-autosize": "^1.0.4",
"vue-toastr": "^2.0.16",
"vue2-animate": "^2.1.0",
"vue2-circle-progress": "^1.2.3",
"vue2-datepicker": "^2.11.0",
"vue2-dropzone": "^3.5.8",
"vue2-google-maps": "^0.10.6",
"vue2-leaflet": "^1.2.3",
"vuelidate": "^0.7.4",
"vuetable-2": "^2.0.0-beta.4",
"vuetify": "^1.5.5",
"vuetrend": "^0.3.2",
"vuex": "^3.1.0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "^3.6.0",
"#vue/cli-plugin-eslint": "^3.6.0",
"#vue/cli-service": "^3.6.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.2.2",
"stylus": "^0.54.5",
"stylus-loader": "^3.0.1",
"vue-cli-plugin-vuetify": "^0.5.0",
"vue-template-compiler": "^2.6.10",
"vuetify-loader": "^1.0.5"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/essential",
"eslint:recommended"
],
"rules": {},
"parserOptions": {
"parser": "babel-eslint"
}
},
"postcss": {
"plugins": {
"autoprefixer": {}
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
You are missing the start script. Add this to your package.json
"scripts": {
"start": "vue-cli-service start",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},

vue.js - I'm getting an error when running my project

sudo npm run serve
> frontend#1.0.0 serve /home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda
> vue-cli-service serve
INFO Starting development server...
12% building 20/21 modules 1 active ...rojetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/buildin/global.js/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226
throw new Error(
^
Error: module property was removed from Dependency (use compilation.moduleGraph.updateModule(dependency, module) instead)
at ProvidedDependency.set (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/webpack/lib/Dependency.js:226:9)
at iterationDependencies (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:940:21)
at factory.create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/Compilation.js:950:8)
at factory (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:409:6)
at hooks.afterResolve.callAsync (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/webpack/lib/NormalModuleFactory.js:155:13)
at _fn0 (eval at create (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/tapable/lib/HookCodeFactory.js:33:10), <anonymous>:14:1)
at fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:158:9)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at that.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:113:7)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:83:5)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at CaseSensitivePathsPlugin.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:51:5)
at CaseSensitivePathsPlugin.fileExistsWithCase (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:89:8)
at that.getFilenamesInDir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:106:10)
at Array.fs.readdir (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/case-sensitive-paths-webpack-plugin/index.js:67:5)
at Storage.finished (/home/shinier01/Projetos/EstudanaIrlanda/frontend-estudenairlanda/node_modules/#vue/cli-service/node_modules/enhanced-
resolve/lib/CachedInputFileSystem.js:55:16)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! frontend#1.0.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the frontend#1.0.0 serve script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/shinier01/.npm/_logs/2020-11-10T18_21_27_165Z-debug.log
I tried to uninstall npm, vue and node, I deleted the .json files, but somehow nothing solves, and I always have this error when executing my command.
but this project is already running normally before, and now I gave an npm install and it updated the packages, but even if I give a roolbakc, or delete and install it again, nothing resolves.
{
"name": "frontend",
"version": "1.0.0",
"description": "A Vue.js project",
"author": ".....",
"private": true,
"scripts": {
"dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#vue/cli": "^4.5.8",
"#vue/cli-service": "^4.5.8",
"axios": "^0.20.0",
"buefy": "^0.9.3",
"firebase": "^7.22.0",
"vue": "^2.6.12",
"vue-router": "^3.0.1"
},
"devDependencies": {
"autoprefixer": "^7.1.2",
"babel-core": "^6.22.1",
"babel-helper-vue-jsx-merge-props": "^2.0.3",
"babel-loader": "^7.1.1",
"babel-plugin-syntax-jsx": "^6.18.0",
"babel-plugin-transform-runtime": "^6.22.0",
"babel-plugin-transform-vue-jsx": "^3.5.0",
"babel-preset-env": "^1.3.2",
"babel-preset-stage-2": "^6.22.0",
"chalk": "^2.0.1",
"copy-webpack-plugin": "^6.3.0",
"css-loader": "^5.0.1",
"extract-text-webpack-plugin": "^2.1.2",
"file-loader": "^1.1.4",
"friendly-errors-webpack-plugin": "^1.6.1",
"html-webpack-plugin": "^2.30.1",
"node-notifier": "^5.1.2",
"optimize-css-assets-webpack-plugin": "^3.2.0",
"ora": "^1.2.0",
"portfinder": "^1.0.13",
"postcss-import": "^11.0.0",
"postcss-loader": "^2.0.8",
"postcss-url": "^7.2.1",
"rimraf": "^2.6.0",
"semver": "^5.3.0",
"shelljs": "^0.7.6",
"uglifyjs-webpack-plugin": "^1.1.1",
"url-loader": "^4.1.1",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^5.4.0",
"webpack-bundle-analyzer": "^4.1.0",
"webpack-cli": "^4.2.0",
"webpack-dev-server": "^3.11.0",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 6.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}
can someone help me solve this error, please?
I faced the same problem and found a solution.
In my case application started using V5 of webpack and it was built on V4. You can run: npm i -D webpack#^4.0.0 to reverse it to V4 and it should fix it.
Special thanks to Mark:
https://forum.layer0.co/t/error-module-property-was-removed-from-dependency/208

the experimental syntax 'decorators-legacy is not supported and shows an error when i try to use mobx tools on my react app

Hey I Have been trying to add #observer to my react component but this error occurs : Support for the experimental syntax 'decorators-legacy' isn't currently enabled here are the steps I have taken:
1.npm install mobx --save and npm i mobx mobx-react --save
tried using observable did not work
added
[
require(‘#babel/plugin-proposal-decorators’).default,
{
legacy: true
}
],
didn't work so i removed it
Created .babelrc in at the root directory and added
{
"presets": ["react-native"],
"plugins": [
[
"#babel/plugin-proposal-decorators",
{
"legacy": true
}
]
]
}
and still not working
Editing:
I did what you just said and same error:
when I npm start -- --reset-cache, this appears on my terminal, maybe it might help:
Emitted 'error' event at:
at Server.WebSocketServer._onServerError (/Users/red/mApp/node_modules/ws/lib/WebSocketServer.js:82:50)
at Server.emit (events.js:202:15)
at emitErrorNT (net.js:1283:8)
at processTicksAndRejections (internal/process/next_tick.js:76:17)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! mapp#0.0.1 start: `node node_modules/react-native/local-cli/cli.js start "--reset-cache"`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the mapp#0.0.1 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
Package.json file
{
"name": "mapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^10.0.2",
"babel-plugin-mobx-deep-action": "^1.6.1",
"jetifier": "^1.6.3",
"jsc-android": "241213.x.x",
"mobx": "^5.11.0",
"mobx-react": "^6.1.1",
"react": "16.8.3",
"react-native": "^0.59.10",
"react-native-background-fetch": "^2.6.0",
"react-native-background-geolocation": "^3.0.7",
"react-native-css-gradient": "^0.3.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-ionicons": "^4.5.6",
"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
"react-native-maps": "^0.24.2",
"react-native-responsive-screen": "^1.2.2",
"react-native-svg": "^9.5.2",
"react-native-svg-transformer": "^0.13.0",
"react-native-vector-icons": "^6.5.0",
"react-native-vertical-tab-view": "^0.1.3",
"react-navigation": "^3.11.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}
You have to add plugin-proposal-decorators in babel.config.js
module.exports = {
presets: ['module:metro-react-native-babel-preset'],
plugins: [['#babel/plugin-proposal-decorators', { legacy: true }]],
};
Add "babel-preset-react-native": "4.0.0", and reset cache
{
"name": "mapp",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"test": "jest"
},
"dependencies": {
"#expo/vector-icons": "^10.0.2",
"babel-plugin-mobx-deep-action": "^1.6.1",
"jetifier": "^1.6.3",
"jsc-android": "241213.x.x",
"mobx": "^5.11.0",
"mobx-react": "^6.1.1",
"react": "16.8.3",
"react-native": "^0.59.10",
"react-native-background-fetch": "^2.6.0",
"react-native-background-geolocation": "^3.0.7",
"react-native-css-gradient": "^0.3.1",
"react-native-gesture-handler": "^1.3.0",
"react-native-ionicons": "^4.5.6",
"react-native-linear-gradient": "react-native-community/react-native-linear-gradient",
"react-native-maps": "^0.24.2",
"react-native-responsive-screen": "^1.2.2",
"react-native-svg": "^9.5.2",
"react-native-svg-transformer": "^0.13.0",
"react-native-vector-icons": "^6.5.0",
"react-native-vertical-tab-view": "^0.1.3",
"react-navigation": "^3.11.0",
"react-redux": "^7.1.0",
"redux": "^4.0.1"
},
"devDependencies": {
"#babel/core": "7.4.5",
"#babel/plugin-proposal-decorators": "^7.4.4",
"#babel/runtime": "7.4.5",
"babel-jest": "24.8.0",
"babel-plugin-transform-decorators-legacy": "^1.3.5",
"jest": "24.8.0",
"metro-react-native-babel-preset": "0.54.1",
"react-test-renderer": "16.8.3",
"redux-devtools": "^3.5.0"
},
"jest": {
"preset": "react-native"
}
}

Unexpected use of reserved word 'import React-native

My bable.src file code is here
{
"presets": ["es2015"]
}
Package.json file code is here
{
"name": "Zoylo",
"version": "0.0.1",
"private": true,
"scripts": {
"start": "node node_modules/react-native/local-cli/cli.js start",
"postinstall": "rm ./node_modules/react-native/local-cli/core/__fixtures__/files/package.json",
"test": "jest"
},
"dependencies": {
"#ptomasroos/react-native-multi-slider": "0.0.11",
"babel-core": "^6.26.0",
"babel-loader": "^7.1.2",
"jwt-node-decoder": "0.0.4",
"npm": "^5.3.0",
"prop-types": "^15.6.1",
"react": "^16.2.0",
"react-dom": "^16.3.2",
"react-native": "^0.52.0",
},
"devDependencies": {
"babel-eslint": "^8.0.3",
"babel-jest": "20.0.3",
"babel-plugin-transform-export-extensions": "^6.22.0",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-react-native": "^4.0.0",
"babel-preset-stage-2": "^6.24.1",
"jest": "20.0.4",
"react-test-renderer": "16.0.0-alpha.12"
},
}
I think its a bable issue. Its working fine just 1 day ago and after npm install i am facing this issue.
I got the answer. I had some problem in .babelrc file now here is my new .babelrc file
{ "env": { "test": { "presets": [ "env", "react", "es2015", "stage-2" ], "plugins": [ "transform-export-extensions" ], "only": [ "./**/*.js", "node_modules/jest-runtime" ] } }, "presets": [ "react-native" ] }
and need to run this command also.
watchman watch-del-all && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache