使用element-ui的Message组件遇“Message is not defined”

4,040 阅读1分钟

描述

请求模块中单独使用Message,如下

import { Message } from 'element-ui'

具体描述

element-ui按需引入,在请求模块中,单独引入Message,请求500时,发现打印不出信息,控制台提示

ReferenceError: _Message is not defined

但是,请求正常时,可以正常弹出信息的

原因

通过查看编译后的代码,发现在请求模块中message有两个(_message和_message2),请求正常时,使用的时正确的message(_message2),请求异常使用另外一个message(_message),所以弹不出来

  • 导入
var _message = _interopRequireDefault(__webpack_require__(/*! element-ui/lib/theme-chalk/message.css */ "./node_modules/element-ui/lib/theme-chalk/message.css"));

__webpack_require__(/*! element-ui/lib/theme-chalk/base.css */ "./node_modules/element-ui/lib/theme-chalk/base.css");

var _message2 = _interopRequireDefault(__webpack_require__(/*! element-ui/lib/message */ "./node_modules/element-ui/lib/message.js"));
  • 请求正常
    (0, _message2.default)({
      message: res.message || 'Error',
      type: 'error',
      duration: 5000
    });
  • 请求异常
  _Message({
    message: 'Error',
    type: 'error',
    duration: 5000
  });

解决

导入之后,使用其它变量名接收下,避免使用错误

import { Message } from 'element-ui'
const _Message = Message

// ...
_Message({
  message: 'Error',
  type: 'error',
  duration: 5000
})

编译后

const _Message = Message

编译之后变为,正确取出Message组件缓存到_Message上,后面使用可以保证不会出错

var _Message = _message2.default;