babel-plugin-component
babel-plugin-component copied to clipboard
Published
20 hours ago •
ElementUI
ElementUI
Uncaught ReferenceError: _MessageBox is not defined
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
// 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
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
为啥这样写一下就行了。。感觉和直接用.是一样的
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,所以我过来更新了一下
谢谢你的解惑，刚刚解决了_MessageBox这个问题， 另外loading的解决方案我觉得放在mixins里会更合适一点， 我现在没有触发到loading的这个bug
// 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找不到
