Failed to install Vuex in Vue3 - vuex

I want to install Vuex but I get an error.
// error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: vuejs-v-3#0.1.0
npm ERR! Found: vue#3.1.2
npm ERR! node_modules/vue
npm ERR! vue#"^3.1.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue#"^2.0.0" from vuex#3.6.2
npm ERR! node_modules/vuex
npm ERR! vuex#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See /home/hap/.npm/eresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/hap/.npm/_logs/2021-06-24T06_46_36_463Z-debug.log
// package.json
{
"name": "vuejs-v-3",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"#apollo/client": "^3.3.20",
"axios": "^0.21.1",
"bootstrap": "^5.0.2",
"core-js": "^3.6.5",
"graphql": "^15.5.1",
"vue": "^3.1.2",
"vue-router": "^4.0.10"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

When using Vue3, refer to Vuex 4 Documentation to install Vuex 4 with
npm install vuex#next --save
and when using Vue2, refer to Vuex 3 Documentation to install Vuex 3 with
npm install vuex --save

As #Seegy said,
Vue 3 uses Vuex 4
Vue 2 uses Vuex 3
As of Feb 2022,
If you are using Vue 2, use the following to install Vuex 3
npm install vuex#3.4.0 --save
If you are using Vue 3, use the following to install Vuex 4
npm install vuex --save or npm install vuex#next --save

had the same error just try
npm install vuex#next --save
instead of npm install vuex --save and it will work

This works for me: npm install vuex#next --save --force.

I tried this before but it didn't work for me
npm install vuex --save
So, this worked for me:
npm install vuex#next --save

Related

Following along with a 'blog tutorial' but npm run dev not working for me

Following along with a 'blog tutorial' but npm run dev not working for me.
Terminal:
candicetomkins#Candys-Air ~/Desktop/cms-blog $ npm run dev [ruby-2.6.8p205]
npm ERR! Missing script: "dev"
npm ERR!
npm ERR! To see a list of scripts, run:
npm ERR! npm run
npm ERR! A complete log of this run can be found in:
npm ERR! /Users/candicetomkins/.npm/_logs/2022-06-27T15_49_33_958Z-debug-0.log
Package.json:
{
"private": true,
"scripts": {
"dev": "next dev",
"build": "next build",
"start": "next start"
},
"dependencies": {
"next": "latest",
"react": "18.1.0",
"react-dom": "18.1.0"
},
"devDependencies": {
"#types/node": "17.0.35",
"#types/react": "18.0.9",
"#types/react-dom": "18.0.5",
"autoprefixer": "^10.4.7",
"postcss": "^8.4.14",
"tailwindcss": "^3.1.2",
"typescript": "4.7.2"
}
}
What have I missed here? Thanks!
You have to check your NPM version. It should be because of version mismatched issue. Make sure your nodeJS and NPM version be updated

React native jest: While resolving: image-jest#1.0.0 npm ERR! Found: react#17.0.1

I am trying to install #testing-library/react-native to a freshly created expo-based react native application.
For adding test cases, I followed the steps mentioned in https://docs.expo.dev/guides/testing-with-jest/ and installed jest and jest-expo.
After that, I tried installing #testing-library/react-native using command
npm install --save-dev #testing-library/react-native
and started getting the below error
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: image-jest#1.0.0
npm ERR! Found: react#17.0.1
npm ERR! node_modules/react
npm ERR! react#"17.0.1" from the root project
npm ERR! peer react#">=16.0.0" from #testing-library/react-native#9.0.0
npm ERR! node_modules/#testing-library/react-native
npm ERR! dev #testing-library/react-native#"*" from the root project
npm ERR! 1 more (react-native)
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react#"17.0.2" from react-test-renderer#17.0.2
npm ERR! node_modules/react-test-renderer
npm ERR! peer react-test-renderer#">=16.0.0" from #testing-library/react-native#9.0.0
npm ERR! node_modules/#testing-library/react-native
npm ERR! dev #testing-library/react-native#"*" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
My package.json looks like below
{
"name": "image-jest",
"version": "1.0.0",
"main": "node_modules/expo/AppEntry.js",
"scripts": {
"start": "expo start",
"android": "expo start --android",
"ios": "expo start --ios",
"web": "expo start --web",
"eject": "expo eject",
"test": "jest"
},
"dependencies": {
"expo": "~44.0.0",
"expo-status-bar": "~1.2.0",
"react": "17.0.1",
"react-dom": "17.0.1",
"react-native": "0.64.3",
"react-native-web": "0.17.1"
},
"devDependencies": {
"#babel/core": "^7.12.9",
"#types/jest": "^27.4.1",
"#types/react": "~17.0.21",
"#types/react-native": "~0.64.12",
"jest": "^26.6.3",
"jest-expo": "^44.0.1",
"typescript": "~4.3.5"
},
"jest": {
"preset": "jest-expo",
"transformIgnorePatterns": [
"node_modules/(?!((jest-)?react-native|#react-native(-community)?)|expo(nent)?|#expo(nent)?/.*|#expo-google-fonts/.*|react-navigation|#react-navigation/.*|#unimodules/.*|unimodules|sentry-expo|native-base|react-native-svg)"
]
},
"private": true
}
I am unable to understand what is causing the issue. Can anyone suggest what can be done to fix it?
The error is because the react-test-renderer#17.0.2 requires react#17.0.2,
while you have an older version of react.
Try to install an older version of react-test-renderer first:
npm i react-test-renderer#17.0.1
And then install #testing-library/react-native

Vue create project - Cannot find module 'vue-loader-v16/package.json'

I have vue-cli installed globally via command npm install -g #vue/cli And I tried to create new project via command vue create examples-vue-2 Everything was ok until I run npm run serve. This command throws me an error Cannot find module 'vue-loader-v16/package.json'.
I am on Win 10, npm 6.7.0, node 11.15.0
Here is whole console log
λ npm run serve
> examples-vue-2#0.1.0 serve c:\wamp64-3-2-0\www\examples-vue-2
> vue-cli-service serve
INFO Starting development server...
ERROR Error: Cannot find module 'vue-loader-v16/package.json'
Error: Cannot find module 'vue-loader-v16/package.json'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:668:15)
at Function.Module._load (internal/modules/cjs/loader.js:591:27)
at Module.require (internal/modules/cjs/loader.js:723:19)
at require (internal/modules/cjs/helpers.js:14:16)
at api.chainWebpack.webpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\config\base.js:114:23)
at webpackChainFns.forEach.fn (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:236:40)
at Array.forEach (<anonymous>)
at Service.resolveChainableWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:236:26)
at Service.resolveWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\Service.js:240:48)
at PluginAPI.resolveWebpackConfig (c:\wamp64-3-2-0\www\examples-vue-2\node_modules\#vue\cli-service\lib\PluginAPI.js:132:25)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! examples-vue-2#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the examples-vue-2#0.1.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! C:\Users\vladi\AppData\Roaming\npm-cache\_logs\2020-08-19T08_20_22_147Z-debug.log
package.json
{
"name": "examples-vue-2",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^3.0.0-0"
},
"devDependencies": {
"#vue/cli-plugin-babel": "~4.5.0",
"#vue/cli-plugin-eslint": "~4.5.0",
"#vue/cli-service": "~4.5.0",
"#vue/compiler-sfc": "^3.0.0-0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}
Many thanks for help.
This works for me:
npm install --save-dev vue-loader-v16
Solution is in this vue-cli package issue https://github.com/vuejs/vue-cli/pull/5718
You may need to update npm version to install missing package.

vue cli project won't run - 'babel-code-frame'

I am trying to create the absolute basic new vue-cli project, on Linux. The generated project won't run. What am I doing wrong?
I installed the most recent vue cli
sudo npm install -g #vue/cli#4.5.0
I created a new project:
cd /tmp
vue create project1
I selected the default presets.
I tried to run the project
$ cd project1
$ npm run serve
> project1#0.1.0 serve /tmp/project1
> vue-cli-service serve
INFO Starting development server...
ERROR Error: Cannot find module 'babel-code-frame'
Error: Cannot find module 'babel-code-frame'
at Function.Module._resolveFilename (internal/modules/cjs/loader.js:636:15)
at Function.Module._load (internal/modules/cjs/loader.js:562:25)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at Object.<anonymous> (/usr/share/nodejs/eslint/lib/formatters/codeframe.js:8:19)
at Module._compile (internal/modules/cjs/loader.js:778:30)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:789:10)
at Module.load (internal/modules/cjs/loader.js:653:32)
at tryModuleLoad (internal/modules/cjs/loader.js:593:12)
at Function.Module._load (internal/modules/cjs/loader.js:585:3)
at Module.require (internal/modules/cjs/loader.js:692:17)
at require (internal/modules/cjs/helpers.js:25:18)
at exports.loadModule (/tmp/project1/node_modules/#vue/cli-shared-utils/lib/module.js:79:14)
at api.chainWebpack.webpackConfig (/tmp/project1/node_modules/#vue/cli-plugin-eslint/index.js:59:26)
at webpackChainFns.forEach.fn (/tmp/project1/node_modules/#vue/cli-service/lib/Service.js:236:40)
at Array.forEach (<anonymous>)
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! project1#0.1.0 serve: `vue-cli-service serve`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the project1#0.1.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/kevin/.npm/_logs/2020-07-24T17_38_02_618Z-debug.log
My npm version is 6.14.7
$ npm --version
6.14.7
This is package.json after manually hacking in "#babel/code-frame" as suggested by Igor.
{
"name": "project1",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^3.6.5",
"vue": "^2.6.11"
},
"devDependencies": {
"#babel/code-frame": "^7.10.4",
"#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",
"eslint-plugin-vue": "^6.2.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"
]
}
I tried clearing down npm cache as per this ticket, but it didn't make a difference.
https://stackoverflow.com/questions/42308879/npm-err-code-elifecycle
I removed and reinstalled nodejs and npm to solve the problem.
sudo apt-get remove npm
sudo apt-get remove nodejs
Re-install
sudo apt-get update
sudo apt-get install nodejs npm

Angular 8 npm install fails

I just recently upgraded to Angular 8 and my local build passing with aot. But in Jenkins build getting failed with below error. Can anyone help?
Here is the error
npm install
npm WARN deprecated core-js#2.6.11: core-js#<3 is no longer maintained and not recommended for usage due to the number of issues.
Please, upgrade your dependencies to the actual version of core-js#3.
npm WARN deprecated circular-json#0.5.9: CircularJSON is in maintenance only, flatted is its successor.
npm WARN deprecated uws#9.148.0: New code is available at github.com/uNetworking/uWebSockets.js
npm ERR! path git
npm ERR! code ENOENT
npm ERR! errno ENOENT
npm ERR! syscall spawn git
npm ERR! enoent Error while executing:
npm ERR! enoent undefined ls-remote -h -t ssh://git#github.com/pemrouz/buble.git
npm ERR! enoent
npm ERR! enoent
npm ERR! enoent spawn git ENOENT
npm ERR! enoent This is related to npm not being able to find a file.
npm ERR! enoent
npm ERR! A complete log of this run can be found in:
npm ERR! /root/.npm/_logs/2020-01-25T10_05_09_308Z-debug.log
here is my package json
"name": "olam-global-survey-app",
"version": "0.0.0",
"scripts": {
"ng": "ng",
"start": "ng serve",
"build": "ng build",
"test": "ng test",
"lint": "ng lint",
"e2e": "ng e2e"
},
"private": true,
"dependencies": {
"#angular/animations": "~8.2.14",
"#angular/common": "~8.2.14",
"#angular/compiler": "~8.2.14",
"#angular/core": "~8.2.14",
"#angular/forms": "~8.2.14",
"#angular/platform-browser": "~8.2.14",
"#angular/platform-browser-dynamic": "~8.2.14",
"#angular/router": "~8.2.14",
"popper": "^1.0.1",
"rxjs": "^6.2.1",
"rxjs-compat": "^6.2.1",
"tslib": "^1.9.0",
"zone.js": "~0.9.1"
},
"devDependencies": {
"#angular-devkit/build-angular": "~0.803.23",
"#angular/cli": "~8.3.23",
"#angular/compiler-cli": "~8.2.14",
"#angular/language-service": "~8.2.14",
"#types/node": "~8.9.4",
"#types/jasmine": "~2.8.8",
"#types/jasminewd2": "~2.0.3",
"codelyzer": "^5.0.1",
"jasmine-core": "~2.99.1",
"jasmine-spec-reporter": "~4.2.1",
"karma": "~3.1.1",
"karma-chrome-launcher": "~2.2.0",
"karma-coverage-istanbul-reporter": "~2.0.1",
"karma-jasmine": "~1.1.2",
"karma-jasmine-html-reporter": "^0.2.2",
"protractor": "~5.4.0",
"ts-node": "~7.0.0",
"tslint": "~5.11.0",
"typescript": "~3.5.3"
}
}
It's a npm cache problem.
just find npm-cache folder and delete it,
open terminal in administrator mode or use sudo if your OS supports linux
or
use npm clean-install
When you upgrade angular 8 its installs all default packages with Bootstrap 4. Bootstrap 4 installs popper.js package which helps for tooltip
Initial popper.js version will be ^1.0.1 and it is not supported with Angular 8 and Node 13. So we have to upgrade the package to version "popper.js": "^1.16.1"