In the process of migrating my project from webpacker to vite, I encountered some Bootstrap Vue issues such as
Multiple instances of Vue detected$attr and $listeners is readonly, which are detailed in BootstrapVue's documentation here
Previously, in webpacker, I addressed these issues by configuring my setup like this:
const resolver = {
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
};
environment.config.merge(resolver)
Attempting to replicate this fix in vite, I added the following code snippet to my vite.config.ts file, but it didn't work as expected:
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 solution to overcome this issue?