Vue2.extend is not a function once built with Vite.

[Doltario]

Hi,

First of all, nice job on this library, this is so useful and the fact that it is modular is awesome.

I am currently trying to move a Vue2.X project to Vue2.7.14 to prepare for Vue3 by the end of the year. I am encountering a curiosity only on the built package. My development server works fine.

To be more specific, after I executed npm run build I obtain a package in my dist folder. But this package won't work, leaving an error in the browser console : l.extend is not a function.

I am using "@baklavajs/core": "1.10.2", "@baklavajs/plugin-renderer-vue": "1.10.2" and "vue": "2.7.14"

I searched the internet and the issues in this repo, but I couldn't find anything. The closest one that I found is https://github.com/newcat/baklavajs/issues/135. Indeed the version 2.7.14 of Vue is kind of a transition to Vue3, and in the migration guide (https://v2.vuejs.org/v2/guide/migration-vue-2-7) it is actually said that extend() is replaced by defineComponent() but I am not sure on how to fix it.

I did a reproduction here : https://stackblitz.com/edit/vitejs-vite-1kfkph

If you need any further information, just let me know :)

Thanks for reading !

[Doltario]

For people that would encounter that problem with vue 2.7.14. After some investigation I was able to state that the issue comes from packages/baklavajs-plugin-renderer-vue. It has a dependency on "portal-vue" (version ^2.1.7) which itself has a dependency on Vue, version ^2.6.7.

In this portal-vue github issue, a similar problem is describe and is solved by adding two aliases in the vite.config.js:

// Import path at file start, like import path from 'path'

alias: {
  'vue': 'vue/dist/vue.js',
  'vue$': path.resolve('/node_modules/vue/dist/vue.esm.js'),
}

And somehow it works.