MessageBox does't work

[Alideniz]

Version & browser

0.14.1

Which component

MessageBox

Steps to reproduce the problem

I want to normally use it

Expected behavior

show me a normal message box without errors

Actual behavior

it gives me errors from modal component $attr and $listeners

[wxsms]

Make sure you're using 0.14.1 not 0.14.0, and it should work as the document examples. If it doesn't, pls paste your code here so I can help you with.

[Alideniz]

I just tried example in the document. However it gives me warnings like this

 Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "value"

$listeners is readonly.

$attrs is readonly.

[wxsms]

While I can see no such problem: https://codepen.io/wxsm/pen/KyxVOg

[Alideniz]

I have too much nested vue instance. Can it be related ?

[wxsms]

I don't think so.

Maybe you can try reproduce the problem you found in some place such as codepen? I can do nothing if I can't reproduce it. Thanks.

[Alideniz]

we are using browserify for the SFC compiling. Is there any problem working with browserify?

[wxsms]

I have not try with browserify, but it is supposed to work with commonjs / es6 env. If other components work as expect then this one should be the same.

Maybe you can try to import and use it individually and see what happens: https://uiv.wxsm.space/message-box/#import-individually

[natecox]

I'm seeing the same issue.

const label = await MessageBox.prompt({
  title: 'Column Rename',
  content: 'Please set your preferred name for this column',
})

Results in

[Vue warn]: $listeners is readonly.
[Vue warn]: $attrs is readonly.

It seems to stem from the Modal instance in the MessageBox.

For reference, I'm also using this via browserify + vueify

[wxsms]

ok. I see the problem now by testing on a browserify project. this is very strange since it only appears in vueify but not vue-loader, even with exactly the same vue and vue-template-complier versions. I may need some time to fix this. pls just ignore the warning by now.

[wxsms]

I can solve this by changing my vuejs in project to runtime build.

For example, in package.json:

{
  ...
  "browser": {
    "vue": "vue/dist/vue.runtime.common.js"
  },
  ...
}

or in the entry of the app:

import Vue from 'vue/dist/vue.runtime.common'
import * as uiv from 'uiv'

Vue.use(uiv)

Both of them will show no warnings anymore. but I still don't know why...

[wxsms]

@Alideniz @natecox pls let me know if these work or not. thanks.

[Alideniz]

@wxsms it worked !!! 👍 thank you

[wxsms]

Closing since have a solution and not a bug of this lib.