SOLVED: [Vue error] $attrs is readonly / $listeners is readonly.

[ya-tmch]

Errors in the console when entering in the input.

Nuxtjs 2.6.1

[tmorehouse]

Which version of BootstrapVue are you using?

[ya-tmch]

2.0.0-rc.17

I deleted the folder, reinstalled the packages and the error disappeared!

[jaideepdasviadynamics]

Getting this same error with version 2.0.0-rc.18. Error message

[jm-asm]

I'm having the same Problem. I think i narrowed it down a bit. I use webpack as bundler and include Vue in my App.js with import Vue from 'vue/dist/vue.esm.js';. Since 2.0.0-rc.16 the components of bootstrap-vue using require('vue'). Looks like because of that webpack is bundling it twice and because of that we keep getting these warnings.

This happens with 2.0.0-rc.17 and up, 2.0.0-rc.16 and 2.0.0-rc.15 are working fine.

[tmorehouse]

See related issue LinusBorg/portal-vue#201 for a solution.

Basically you need to set up an alias in your bundler config file to specify which Vue build you are using, to ensure that BootstrapVue, PortalVue (required in in release 2.0.0-rc.19), and your project are all using the same Vue build/source.

https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only

[tmorehouse]

Example with webpack and using the compiler+runtime build of Vue:

module.exports = {
  // ...
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js' // 'vue/dist/vue.common.js' for webpack 1
    }
  }
}

Example for rollup:

const alias = require('rollup-plugin-alias')

rollup({
  // ...
  plugins: [
    alias({
      'vue': require.resolve('vue/dist/vue.esm.js')
    })
  ]
})

To use the runtime only builds of Vue, replace vue/dist/vue.esm.js with vue/dist/vue.runtime.esm.js (or if using Webpack 1 replace vue/dist/vue.common.js with vue/dist/vue.runtime.common.js)

[tmorehouse]

Please upgrade to 2.0.0-rc.19

[Domuska]

I am still encountering this issue at RC19. I have the following alias set in my webpack config:

    alias: {
      ...
      'vue$': 'vue/dist/vue.esm.js'
    },
   ...
  },

I also did not receive a warning that I have multiple instances of Vue, if that is already merged in in RC19.

To note, I'm not using nuxt nor server-rendered components, but I am using vue-electron together with this as I'm using Electron alongside Vue for my project. Is there something else I can tell you to help to find the source of the problem? Or should I open a new issue for this?

[tmorehouse]

The warning is not available in RC.19.... it will be in RC.20 (See #3168)

[c4ss]

I am still encountering this issue at RC19. I have the following alias set in my webpack config:

    alias: {
      ...
      'vue$': 'vue/dist/vue.esm.js'
    },
   ...
  },

I also did not receive a warning that I have multiple instances of Vue, if that is already merged in in RC19.

To note, I'm not using nuxt nor server-rendered components, but I am using vue-electron together with this as I'm using Electron alongside Vue for my project. Is there something else I can tell you to help to find the source of the problem? Or should I open a new issue for this?

Are you treating vue as an external in your webpack config?

externals: [
  'vue', // remove this line
],

[b-jan]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:

let whiteListedModules = ['vue', 'bootstrap-vue']

[KennanChan]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:

let whiteListedModules = ['vue', 'bootstrap-vue']

Save my hours

[buithehien1991]

It still happen on version 2.1.0

[buithehien1991]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:

let whiteListedModules = ['vue', 'bootstrap-vue']

Could you please where I should put this file? I put it into root of Rails folder and try but it still happen this error.
Please help me!!!

[scottrobertson]

Getting this when upgrading to 2.1.0 from 2.0.0-rc.11. Example code that is causing it:

<b-form-input placeholder='Filter...' v-model="search" type="text"></b-form-input>

[tmorehouse]

@scottrobertson soulds like you need to set up an alias for Vue, as mentioned in the above comments, and in the getting started docs https://bootstrap-vue.js.org/docs#aliasing-vue-import

[scottrobertson]

@tmorehouse, unfortunately, it does not work. Same errors :( Had someone else verify that the alias was setup correctly too.

[breekoy]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:

let whiteListedModules = ['vue', 'bootstrap-vue']

Thank you! :)

[yangjindong]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:
let whiteListedModules = ['vue', 'bootstrap-vue']

Could you please where I should put this file? I put it into root of Rails folder and try but it still happen this error.
Please help me!!!

This has resolved my problem.

For anyone experiencing this problem with Rails and Webpacker if you are importing Vue with the compiler:
import Vue from 'vue/dist/vue.esm'
to resolve this issue add the following line to the config/webpack/environment.js file:
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' };
just before this line:
module.exports = environment

https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24987

[xalidevxx]

Hello everyone!
I have a problem with bootsrap-vue. I use vue cli 3 and an error appears $attr $listener readonly.
Please help ^^

[xalidevxx]

this is my vue.config.js module.exports = {
css: {
loaderOptions: {
sass: {
prependData: @import "@/assets/styles/styles.scss";
}
}
}
}

[xalidevxx]

in my main.js

import Vue from 'vue'
import App from './App.vue'
import { BootstrapVue, IconsPlugin } from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import "./assets/styles/styles.scss"

Vue.use(BootstrapVue)
Vue.use(IconsPlugin)
Vue.config.productionTip = false

new Vue({
render: h => h(App),
}).$mount('#app')

[xalidevxx]

i use single wepback and babel

[tariktuzlakovic]

The fix that worked for me was to install separately bootstrap-vue and then bootstrap.

npm install bootstrap-vue

then

npm install bootstrap

Hope it helps!

[yannicklescure]

in webpack.renderer.config.js add bootstrap-vue to the List of node_modules to include in webpack bundle:
let whiteListedModules = ['vue', 'bootstrap-vue']

Could you please where I should put this file? I put it into root of Rails folder and try but it still happen this error.
Please help me!!!

This has resolved my problem.

For anyone experiencing this problem with Rails and Webpacker if you are importing Vue with the compiler:
import Vue from 'vue/dist/vue.esm'
to resolve this issue add the following line to the config/webpack/environment.js file:
environment.config.resolve.alias = { 'vue$': 'vue/dist/vue.esm.js' };
just before this line:
module.exports = environment

https://github.com/vuetifyjs/vuetify/discussions/4068#discussioncomment-24987

Many thanks !

[CarlosZoft]

if you are using vue 2.7 and vite, try to use :

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