How to make Bootstrap-Vue / Vue 2 work with Vite

user_278843 0
Viewed 687

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

bootstrap-vue vite vue.js webpack javascript
1 Answers

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.

user_7474180
Related