I have a project running some Vue2/BootstrapVue components, setup on webpacker, and I'm trying to migrate from webpacker to vite and got some Bootstrap Vue issues along the way, like Multiple instances of Vue detected or $attr and $listeners is readonly, just like described in BootstrapVue's documentation here
Now, in order to fix this, in webpacker, somewhere in my config i was doing this:
const resolver = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
environment.config.merge(resolver)
I tried doing something similar in vite, by adding the following in my vite.config.ts file, but this doesn't seem to work, so I'm probably not doing it right:
import {defineConfig} from 'vite'
import RubyPlugin from 'vite-plugin-ruby'
import {createVuePlugin} from "vite-plugin-vue2";
export default defineConfig({
plugins: [
RubyPlugin(),
createVuePlugin()
],
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
})
So my question is what would be the recommended fix for this issue
Vite provides a resolve.dedupe setting which you can use when running into duplication problems:
export default defineConfig({
resolve: {
dedupe: ['vue', 'vue-router'],
},
})
However, this is not usual for vue, in most cases it works well out of the box.
Try removing the vue$ alias and switch your imports to use vue, Vite should automatically optimize it as a dependency and correctly resolve imports.