vueuse/vue-demi

Can't use Vue 2 library in Vue 3

amitchaudhary140 opened this issue · 1 comments

amitchaudhary140 commented

I have developed my library using Vue 2.7 and vue-demi with Vite. I am able to consume the library in Vue 2.7 and everything is working fine but not in Vue 3.

As soon as I use any of the components from my library, I get below errors in browser console and my components are not instantiated/mounted.

image

It seems Vue 3 does not work well with Vue 2. But then what is the point of using vue-demi?

The workaround that I have been trying is to publish two separate packages for each version with below scripts:

"scripts": {
    "dev": "vite",
    "build:2": "vue-demi-switch 2 vue2 && run-p build-only build:styles",
    "build:3": "vue-demi-switch 3 && run-p build-only build:styles",
.......
}

Now when I try to build for Vue 2, it throws below error:

[vite:vue2] source.startsWith is not a function
file: /Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/src/components/audio/AudioPlayer/AudioPlayer.vue
error during build:
TypeError: source.startsWith is not a function
    at startsWith (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1420:17)
    at isEnd (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:1457:11)
    at parseChildren (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:795:11)
    at Object.baseParse (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-core/dist/compiler-core.cjs.prod.js:769:5)
    at Object.parse (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-dom/dist/compiler-dom.cjs.prod.js:2956:23)
    at Object.parse$2 [as parse] (/Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vue/compiler-sfc/dist/compiler-sfc.cjs.js:1198:24)
    at createDescriptor (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:68:27)
    at transformMain (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:755:34)
    at Object.transform (file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/@vitejs/plugin-vue2/dist/index.mjs:1104:16)
    at file:///Users/amitchaudhary/Desktop/D/Projects/Mindvalley/mv_universal_player/mv-universal-player/node_modules/rollup/dist/es/shared/node-entry.js:24656:40

Please let me know what I should do.

philippevezina commented

You need to change your Vite config to use @vitejs/plugin-vue instead of @vitejs/plugin-vue2.

I'm guessing that you are following Vue's migration build? It isn't very clear in the instructions that you need to change it.