Next.js导入registerUser报is not a function错误排查

报错信息 #

开发Next.js项目时触发运行时类型错误，完整报错内容：
TypeError: (0 , _pages_auth__WEBPACK_IMPORTED_MODULE_3__.registerUser) is not a function

复现场景 #

• Auth.js文件内仅定义了名为registerStudent的异步函数，代码如下：

const registerStudent = async (formData) => {
  const { address ,batchTime, collageName, email, fatherName, gender, guardianMobile, hscBoard, hscGPA, hscPassingYear,
    hscReg, hscRoll, imgeURL, motherName, name, paymentAmount, programName, schoolName, sscBoard, sscGPA, sscPassingYear,
    sscReg, sscRoll, studentMobile, transactionID } = formData;

  console.log(address);
  return address;
}

• 业务文件中使用命名导入语法引入函数，代码如下：

import { registerUser }  from '../../api/auth';

• 编码阶段编辑器已提前抛出两条警告：

Cannot resolve symbol 'registerUser'
Create class 'registerUser'
执行导入得到的registerUser时直接触发上述运行时报错。

根本原因 #

导入标识符与模块实际导出的标识符不匹配，同时原文件未做导出声明：

1. Auth.js中只定义了registerStudent函数，从未定义名为registerUser的函数，也没有对registerStudent做导出处理；
2. 导入语句尝试从auth模块获取不存在的registerUser导出项，得到的值为undefined，将undefined作为函数调用就会抛出"not a function"类型错误；
3. 编辑器给出的两条警告已经提前指向该问题：当前导入路径下不存在可识别的registerUser标识符。

修复步骤 #

1. 在Auth.js中正确导出已定义的函数，两种写法任选其一即可：
   • 声明时直接导出：

   // 函数声明前添加export关键字
   export const registerStudent = async (formData) => {
     // 原有函数逻辑保持不变
     const { address ,batchTime, collageName, email, fatherName, gender, guardianMobile, hscBoard, hscGPA, hscPassingYear,
       hscReg, hscRoll, imgeURL, motherName, name, paymentAmount, programName, schoolName, sscBoard, sscGPA, sscPassingYear,
       sscReg, sscRoll, studentMobile, transactionID } = formData;
   
     console.log(address);
     return address;
   }
   

   • 文件末尾统一导出：

   // 在Auth.js文件末尾添加导出语句
   export { registerStudent };
   

2. 修正导入语句的标识符，和模块实际导出的函数名保持一致：

// 将错误的registerUser替换为实际存在的registerStudent
import { registerStudent }  from '../../api/auth';

如果业务场景必须使用registerUser作为调用名，可以在导入时做重命名处理：import { registerStudent as registerUser } from '../../api/auth';，也可以直接将原函数改名为registerUser后再完成导出、导入流程。

内容的提问来源于stack exchange，提问作者MD Jahid Hasan