I'm workig on a Vue 3 project in Visual Studio 2022.
I use npm as package manager and I want to install pinia.
So I did: npm install pinia
I also added Pinia in my vue application as plugin:
// In main.js
import { createPinia } from 'pinia'
createApp(App)
.use(createPinia())
.use(/*...*/)
.use(/*...*/)
.mount('#app')
When I build the app, the building process completes to the end and the debugging of the app starts. But when local debugging webserver opens, it shows around 50 errors in its console window, all of the same kind. The webbrowser instance in the Visual Studio debug process opens, showing my running app. But the webpack dev error overlay shows over the application, showing that same errors:
ERROR in ../node_modules/pinia/dist/pinia.mjs 25:55-61
export 'inject' (imported as 'inject') was not found in 'vue-demi' (possible exports: Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, Vue, Vue2, hasInjectionContext, install, isVue2, isVue3, version)
ERROR in ../node_modules/pinia/dist/pinia.mjs 614:43-48
export 'toRaw' (imported as 'toRaw') was not found in 'vue-demi' (possible exports: Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, Vue, Vue2, hasInjectionContext, install, isVue2, isVue3, version)
ERROR in ../node_modules/pinia/dist/pinia.mjs 807:12-17
export 'watch' (imported as 'watch') was not found in 'vue-demi' (possible exports: Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, Vue, Vue2, hasInjectionContext, install, isVue2, isVue3, version)
ERROR in ../node_modules/pinia/dist/pinia.mjs 807:24-29
export 'unref' (imported as 'unref') was not found in 'vue-demi' (possible exports: Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, Vue, Vue2, hasInjectionContext, install, isVue2, isVue3, version)
ERROR in ../node_modules/pinia/dist/pinia.mjs 864:27-34
export 'markRaw' (imported as 'markRaw') was not found in 'vue-demi' (possible exports: Fragment, KeepAlive, Suspense, Teleport, Transition, TransitionGroup, Vue, Vue2, hasInjectionContext, install, isVue2, isVue3, version)
And so on........
I don't understand why installing pinia is so problematic. There are more issues posted on the internet about installing pinia, and some of them look very comparable to my case.
I found this similar looking cases:
- Issue Using Vue3 With pinia
- SyntaxError: The requested module 'vue-demi' does not provide an export named 'hasInjectionContext' while running tests with Pinia in Vitest
- "hasInjectionContext" is not exported by "node_modules/vue-demi/lib/index.mjs", imported by "node_modules/pinia/dist/pinia.mjs" https://github.com/vuejs/pinia/issues/2210
It looks like there must be something wrong with the dependencies. But I cannot solve my problem, and my understanding of package managers is low. I just see them as a black box and install the packages I need.
This is in the log file:
# npm resolution error report
While resolving: [email protected]
Found: [email protected]
node_modules/vue
vue@"^3.3.6" from the root project
peerOptional vue@"^2 || ^3.2.13" from @vue/[email protected]
node_modules/@vue/babel-preset-app
@vue/babel-preset-app@"^5.0.8" from @vue/[email protected]
node_modules/@vue/cli-plugin-babel
dev @vue/cli-plugin-babel@"~5.0.0" from the root project
peerOptional vue@"*" from @vue/[email protected]
node_modules/@vue/babel-preset-jsx
@vue/babel-preset-jsx@"^1.1.2" from @vue/[email protected]
node_modules/@vue/babel-preset-app
@vue/babel-preset-app@"^5.0.8" from @vue/[email protected]
node_modules/@vue/cli-plugin-babel
dev @vue/cli-plugin-babel@"~5.0.0" from the root project
peer vue@"3.3.4" from @vue/[email protected]
node_modules/@vue/compat
@vue/compat@"^3.3.4" from the root project
peer vue@"3.3.4" from @vue/[email protected]
node_modules/@vue/server-renderer
@vue/server-renderer@"3.3.4" from [email protected]
peer vue@"^3.2.0" from [email protected]
node_modules/vue-router
vue-router@"^4.2.4" from the root project
peer vue@"^3.0.2" from [email protected]
node_modules/vuex
vuex@"^4.0.2" from the root project
Could not resolve dependency:
pinia@"^2.1.3" from the root project
Conflicting peer dependency: [email protected]
node_modules/vue
peer vue@">= 2.5 < 2.7" from @vue/[email protected]
node_modules/@vue/composition-api
peerOptional @vue/composition-api@"^1.4.0" from [email protected]
node_modules/pinia
pinia@"^2.1.3" from the root project
Fix the upstream dependency conflict, or retry
this command with --force or --legacy-peer-deps
to accept an incorrect (and potentially broken) dependency resolution.
What am I overlooking? To me it looks like there's just something wrong with dependencies. But I really don't know how to fix this. I also tried uninstalling pinia and re-installing it. I manually added "pinia": "..." in the "dependencies" object in package.json. But then the compilation totally fails.
Lastly, here's my package.json
{
"name": "myprojectname",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"@vue/compat": "^3.3.4",
"axios": "^1.4.0",
"bootstrap": "^4.5.3",
"bootstrap-vue": "^2.23.1",
"core-js": "^3.8.3",
"jest": "^29.6.2",
"jest-editor-support": "^31.1.0",
"vue": "^3.3.6",
"vue-router": "^4.2.4",
"vuex": "^4.0.2"
},
"devDependencies": {
"@babel/core": "^7.12.16",
"@babel/eslint-parser": "^7.12.16",
"@vue/cli-plugin-babel": "~5.0.0",
"@vue/cli-plugin-eslint": "~5.0.0",
"@vue/cli-service": "~5.0.0",
"css-loader": "^6.8.1",
"eslint": "^7.32.0",
"eslint-plugin-vue": "^8.0.3",
"mini-css-extract-plugin": "^2.7.6",
"node-sass": "^9.0.0",
"sass": "^1.64.2",
"sass-loader": "^13.3.2",
"style-loader": "^3.3.3"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "@babel/eslint-parser"
},
"rules": {
"vue/multi-word-component-names": "off",
"no-mixed-spaces-and-tabs": "off",
"no-unused-vars": "off"
}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead",
"not ie 11"
]
}
And when I do npm list vue the output is:
I really hope someone can be of any help.