Closed jschirrmacher closed 2 years ago
override it with vue@2
at the moment. I shouldn't have pushed the tests to the main branch
But pnpm handles it well, weird.
When using npm i vue@2
, I get
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: pinia-vue-2@0.0.0
npm ERR! Found: vue@2.6.14
npm ERR! node_modules/vue
npm ERR! vue@"2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.7.0-0" from @vitejs/plugin-vue2@1.1.0
npm ERR! node_modules/@vitejs/plugin-vue2
npm ERR! dev @vitejs/plugin-vue2@"^1.1.0" 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.
while npm i vue@2 --legacy-peer-deps
seem to work
However, npm run dev
reports
➜ example-vue-2-vite git:(main) ✗ npm run dev
> pinia-vue-2@0.0.0 dev
> vite
error when starting dev server:
Error: Failed to resolve vue/compiler-sfc.
@vitejs/plugin-vue2 requires vue (>=2.7.0) to be present in the dependency tree.
yeah, that also needs to be changed. You can refer to https://github.com/piniajs/example-vue-2-vite/commit/c4e16bbef2071ca6da1e1576dc872a5ec10a6f87 to see a version working with vue 2. However, if you want to use this to scaffold a new project, you should use Vue 3 instead 😄 Good luck!
Thanks for your quick responses! I'll try https://github.com/piniajs/example-vue-2-vite/commit/c4e16bbef2071ca6da1e1576dc872a5ec10a6f87 then.
In fact, I try to use the package to check why my (larger) vue2 project doesn't work with pinia (I get the same problems there), so it seems I have to stick with vue2 for now or need to migrate to vue3 first. 😞
The commit you mentioned seems to be the current main
HEAD. This was the first version I used, so this doesn't seem to work.
Using pnpm install
works when I use strict-peer-dependencies=false
in .npmrc
, but running npm run dev
and opening the URL in Chrome brings the following errors:
Vue warn]: toRefs() expects a reactive object but received a plain one.
found in
---> <App> at /Users/joachimschirrmacher/Projects/example-vue-2-vite/src/App.vue
<Root>
warn @ vue.runtime.esm.js:572
toRefs @ vue.runtime.esm.js:1004
setup @ pinia.esm-browser.js:1146
(anonymous) @ pinia.esm-browser.js:1377
EffectScope2.run @ vue.runtime.esm.js:3377
(anonymous) @ pinia.esm-browser.js:1377
EffectScope2.run @ vue.runtime.esm.js:3377
createSetupStore @ pinia.esm-browser.js:1375
createOptionsStore @ pinia.esm-browser.js:1164
useStore @ pinia.esm-browser.js:1650
setup @ App.vue:46
invokeWithErrorHandling @ vue.runtime.esm.js:3970
initSetup @ vue.runtime.esm.js:2353
initState @ vue.runtime.esm.js:5166
Vue2._init @ vue.runtime.esm.js:5491
VueComponent @ vue.runtime.esm.js:5626
createComponentInstanceForVnode @ vue.runtime.esm.js:2183
init @ vue.runtime.esm.js:2045
createComponent2 @ vue.runtime.esm.js:6367
createElm @ vue.runtime.esm.js:6321
patch2 @ vue.runtime.esm.js:6909
Vue2._update @ vue.runtime.esm.js:2923
updateComponent @ vue.runtime.esm.js:3028
Watcher2.get @ vue.runtime.esm.js:3517
Watcher2 @ vue.runtime.esm.js:3507
mountComponent @ vue.runtime.esm.js:3045
Vue.$mount @ vue.runtime.esm.js:8563
(anonymous) @ main.ts:11
vue.runtime.esm.js:572 [Vue warn]: toRefs() expects a reactive object but received a plain one.
found in
---> <App> at /Users/joachimschirrmacher/Projects/example-vue-2-vite/src/App.vue
<Root>
warn @ vue.runtime.esm.js:572
toRefs @ vue.runtime.esm.js:1004
setup @ pinia.esm-browser.js:1146
(anonymous) @ pinia.esm-browser.js:1377
EffectScope2.run @ vue.runtime.esm.js:3377
(anonymous) @ pinia.esm-browser.js:1377
EffectScope2.run @ vue.runtime.esm.js:3377
createSetupStore @ pinia.esm-browser.js:1375
createOptionsStore @ pinia.esm-browser.js:1164
useStore @ pinia.esm-browser.js:1650
setup @ App.vue:47
invokeWithErrorHandling @ vue.runtime.esm.js:3970
initSetup @ vue.runtime.esm.js:2353
initState @ vue.runtime.esm.js:5166
Vue2._init @ vue.runtime.esm.js:5491
VueComponent @ vue.runtime.esm.js:5626
createComponentInstanceForVnode @ vue.runtime.esm.js:2183
init @ vue.runtime.esm.js:2045
createComponent2 @ vue.runtime.esm.js:6367
createElm @ vue.runtime.esm.js:6321
patch2 @ vue.runtime.esm.js:6909
Vue2._update @ vue.runtime.esm.js:2923
updateComponent @ vue.runtime.esm.js:3028
Watcher2.get @ vue.runtime.esm.js:3517
Watcher2 @ vue.runtime.esm.js:3507
mountComponent @ vue.runtime.esm.js:3045
Vue.$mount @ vue.runtime.esm.js:8563
(anonymous) @ main.ts:11
vue.runtime.esm.js:572 [Vue warn]: Error in render: "TypeError: state.rawItems.reduce is not a function"
found in
---> <App> at /Users/joachimschirrmacher/Projects/example-vue-2-vite/src/App.vue
<Root>
warn @ vue.runtime.esm.js:572
logError @ vue.runtime.esm.js:3998
globalHandleError @ vue.runtime.esm.js:3994
handleError @ vue.runtime.esm.js:3961
Vue2._render @ vue.runtime.esm.js:2596
updateComponent @ vue.runtime.esm.js:3028
Watcher2.get @ vue.runtime.esm.js:3517
Watcher2 @ vue.runtime.esm.js:3507
mountComponent @ vue.runtime.esm.js:3045
Vue.$mount @ vue.runtime.esm.js:8563
init @ vue.runtime.esm.js:2046
createComponent2 @ vue.runtime.esm.js:6367
createElm @ vue.runtime.esm.js:6321
patch2 @ vue.runtime.esm.js:6909
Vue2._update @ vue.runtime.esm.js:2923
updateComponent @ vue.runtime.esm.js:3028
Watcher2.get @ vue.runtime.esm.js:3517
Watcher2 @ vue.runtime.esm.js:3507
mountComponent @ vue.runtime.esm.js:3045
Vue.$mount @ vue.runtime.esm.js:8563
(anonymous) @ main.ts:11
vue.runtime.esm.js:4002 TypeError: state.rawItems.reduce is not a function
at Object.items (cart.ts:11:22)
at VueComponent.<anonymous> (pinia.esm-browser.js:1159:38)
at Watcher2.get (vue.runtime.esm.js:3517:33)
at Watcher2.evaluate (vue.runtime.esm.js:3618:27)
at get value [as value] (vue.runtime.esm.js:3681:29)
at Proxy.renderList (vue.runtime.esm.js:1671:33)
at Proxy.render (App.vue:81:1)
at Vue2._render (vue.runtime.esm.js:2593:28)
at VueComponent.updateComponent (vue.runtime.esm.js:3028:27)
at Watcher2.get (vue.runtime.esm.js:3517:33)
We finally found the problem, we are using ignore-scripts=true in all our setups (as a security measure), and vue-demi has a post install script to determine the vue version. This script never ran, so the code did not behave as expected. It works after exectuing npm rebuild esbuild vue-demi --ignore-scripts=false
, thank you for your help!
When I clone the current repository and call
npm install
, I get the following messages: