Uncaught ReferenceError: _MessageBox is not defined

[DotCoyote]

When using with babel@^7.0.0 everything works fine except of the MessageBox-Component of Vue elementUI:

Uncaught ReferenceError: _MessageBox is not defined

main.js:

/*
 * ELEMENT UI
 */
import {
  Alert,
  Button,
  ButtonGroup,
  Card,
  Checkbox,
  CheckboxGroup,
  Col,
  Collapse,
  CollapseItem,
  DatePicker,
  Dialog,
  Dropdown,
  DropdownItem,
  DropdownMenu,
  Form,
  FormItem,
  Input,
  Loading,
  MessageBox,
  Message,
  Option,
  Pagination,
  Radio,
  RadioGroup,
  Row,
  Select,
  Table,
  TableColumn,
  Tag,
  Tooltip,
  Tree,
  Upload
} from 'element-ui'
import lang from 'element-ui/lib/locale/lang/de'
import locale from 'element-ui/lib/locale'

// element-ui localization
locale.use(lang)

Vue.use(Alert)
Vue.use(Button)
Vue.use(ButtonGroup)
Vue.use(Card)
Vue.use(Checkbox)
Vue.use(CheckboxGroup)
Vue.use(Col)
Vue.use(Collapse)
Vue.use(CollapseItem)
Vue.use(DatePicker)
Vue.use(Dialog)
Vue.use(Dropdown)
Vue.use(DropdownItem)
Vue.use(DropdownMenu)
Vue.use(Form)
Vue.use(FormItem)
Vue.use(Input)
Vue.use(Loading)
Vue.use(Option)
Vue.use(Pagination)
Vue.use(Radio)
Vue.use(RadioGroup)
Vue.use(Row)
Vue.use(Select)
Vue.use(Tag)
Vue.use(Table)
Vue.use(TableColumn)
Vue.use(Tooltip)
Vue.use(Tree)
Vue.use(Upload)

Vue.prototype.$msgbox = MessageBox
Vue.prototype.$alert = MessageBox.alert
Vue.prototype.$confirm = MessageBox.confirm
Vue.prototype.$prompt = MessageBox.prompt
Vue.prototype.$message = Message

[TrumanGu]

同样遇到了这个问题

[Yangfan2016]

mark

[UriChen]

// TODO
// fix bug https://github.com/ElementUI/babel-plugin-component/issues/31
const _Loading = Loading
const { directive: loadingDirective, service: loadingService } = _Loading
const _MessageBox = MessageBox
const { alert, confirm, prompt } = _MessageBox

Vue.use(loadingDirective)

Vue.prototype.$loading = loadingService
Vue.prototype.$msgbox = _MessageBox
Vue.prototype.$alert = alert
Vue.prototype.$confirm = confirm
Vue.prototype.$prompt = prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

[wzono]

const { directive: loadingDirective, service: loadingService } = Loading
const msgbox = MessageBox
const { alert, confirm, prompt } = msgbox
Vue.use(loadingDirective)

Vue.prototype.$loading = loadingService
Vue.prototype.$msgbox = msgbox
Vue.prototype.$alert = alert
Vue.prototype.$confirm = confirm
Vue.prototype.$prompt = prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

为啥这样写一下就行了。。感觉和直接用.是一样的

[UriChen]

const { directive: loadingDirective, service: loadingService } = Loading
const msgbox = MessageBox
const { alert, confirm, prompt } = msgbox
Vue.use(loadingDirective)

Vue.prototype.$loading = loadingService
Vue.prototype.$msgbox = msgbox
Vue.prototype.$alert = alert
Vue.prototype.$confirm = confirm
Vue.prototype.$prompt = prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

为啥这样写一下就行了。。感觉和直接用。是一样的

我也还没弄明白,这个bug好像不是elementui导致的,
似乎是MessageBox的指向变成了_MessageBox导致无法被找到,
于是我就在本地声明一个变量来保存MessageBox,竟意外的解决了问题,
我发现在使用typescript时,除了MessageBox之外,Loading也存在bug,所以我过来更新了一下

[feimao90]

谢谢你的解惑，刚刚解决了_MessageBox这个问题， 另外loading的解决方案我觉得放在mixins里会更合适一点， 我现在没有触发到loading的这个bug

[itaffy]

// TODO
// fix bug https://github.com/ElementUI/babel-plugin-component/issues/31
const _Loading = Loading
const { directive: loadingDirective, service: loadingService } = _Loading
const _MessageBox = MessageBox
const { alert, confirm, prompt } = _MessageBox

Vue.use(loadingDirective)

Vue.prototype.$loading = loadingService
Vue.prototype.$msgbox = _MessageBox
Vue.prototype.$alert = alert
Vue.prototype.$confirm = confirm
Vue.prototype.$prompt = prompt
Vue.prototype.$notify = Notification
Vue.prototype.$message = Message

为什么我按你的写了还是报_Loading找不到

[longshihui]

I have same problem, what cause this problem? because this plugin?