Webpack导入含async函数的confirmModal.js报ui未定义错误如何解决

这是ES模块化的作用域隔离特性导致的，你在confirmModal.js中定义的ui变量属于模块内部私有变量，既没有对外导出，也没有挂载到全局作用域，因此app.js中无法直接访问该变量，和async函数、webpack编译逻辑无关。

你可以任选以下两种方案之一修复：

• 方案1：挂载到全局作用域（适合快速兼容旧代码）
  修改confirmModal.js代码：

const ui = {
    confirm: async (message) => createConfirm(message)
}
// 新增这一行，把ui挂载到window全局对象
window.ui = ui

之后app.js中就可以直接调用ui.confirm了。

• 方案2：使用ES模块标准导出导入（更规范的写法）
  第一步修改confirmModal.js，对外导出ui对象：

const ui = {
    confirm: async (message) => createConfirm(message)
}
export default ui

第二步修改app.js的导入语句，主动引入ui对象：

// 把原来的import './confirmModal'改成下面的写法
import ui from './confirmModal'

• 注意文件名大小写统一：你提供的文件名是ConfirmModal.js（首字母大写），但导入语句写的是./confirmModal（全小写），大小写不匹配在Linux、Mac等大小写敏感的系统下会导致文件加载失败，建议统一为全小写或者保持大小写完全一致。
• 你当前的babel配置已经可以正常编译async语法，不需要额外调整配置。

内容的提问来源于stack exchange，提问作者Martin Hrabal