调用类方法时报Unhandled Rejection (TypeError): function is not a function错误

高概率原因 #

• 导入导出不匹配
  首先检查SoapController类的导入导出语法：
  若类文件使用普通导出 export class SoapController {...}，Login 模块必须用大括号导入：import { SoapController } from '类文件相对路径'
  若类文件使用默认导出 export default SoapController，才可使用无大括号的导入写法 import SoapController from '类文件相对路径'
  导入导出不匹配时，拿到的SoapController实际为undefined，实例化后是空对象，自然找不到createUser方法。
• 导入路径/重名覆盖问题
  1. 检查导入路径的大小写、相对层级是否正确，部分打包环境对文件名大小写敏感，路径写错会导入错误内容
  2. 检查Login模块内是否在导入后重新定义了同名SoapController变量，覆盖了导入的类
• 编译环境兼容问题
  你代码中createUser异步方法末尾多写了多余的分号，低版本Babel或未配置异步类方法转换插件时，可能会导致createUser未被正确挂载到类原型上，实例无法访问该方法。
• 开发缓存问题
  热更新场景下可能存在旧代码缓存，清空缓存重启开发服务即可验证。

排查步骤 #

1. 在const soapController = new SoapController()后增加打印：console.log(soapController, SoapController.prototype)，查看实例原型链上是否存在createUser方法
2. 对比可正常调用该类的另一个JSX文件的导入语句，确认Login模块的导入写法完全一致

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