search

piniajs / example-vue-2-vite

28 stars 5 forks source link

Inconsistent dependencies prevent installation #37

Closed jschirrmacher closed 2 years ago

jschirrmacher commented 2 years ago

When I clone the current repository and call npm install, I get the following messages:

➜  example-vue-2-vite git:(main) npm i                     
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.7.0-beta.3
npm ERR! node_modules/vue
npm ERR!   vue@"^2.7.0-beta.3" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer vue@"^2.6.14 || ^3.2.0" from pinia@2.0.14
npm ERR! node_modules/pinia
npm ERR!   pinia@"^2.0.14" from the root project
posva commented 2 years ago

override it with vue@2 at the moment. I shouldn't have pushed the tests to the main branch

posva commented 2 years ago

But pnpm handles it well, weird.

jschirrmacher commented 2 years ago

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

jschirrmacher commented 2 years ago

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.
posva commented 2 years ago

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!

jschirrmacher commented 2 years ago

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. 😞

jschirrmacher commented 2 years ago

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.

jschirrmacher commented 2 years ago

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)
Morl99 commented 2 years ago

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!