React从其他文件导入函数显示undefined，调用时报错怎么办？

核心问题根源 #

导出与导入的语法规则不匹配是导致该问题的直接原因：

• file1.react.js 中采用export default functionName的默认导出规则
• file2.react.js 中采用import {functionName} from 'file1.react'的命名导入规则
  两类语法不匹配时，导入端无法匹配到对应的导出值，最终返回undefined，触发“functionName不是一个函数”的报错。

修复方案 #

二选一即可，无需同时修改两端代码：

• 方案1：保留现有默认导出逻辑，对齐导入语法
  删除导入语句外层的花括号，匹配默认导出规则：
  import functionName from 'file1.react'
• 方案2：保留现有命名导入逻辑，对齐导出语法
  删除file1.react.js中单独的export default functionName语句，将导出逻辑直接绑定在函数定义上，改为命名导出：
  export const functionName = function (): React.Node { return ( // insert code here ); }

常见连带问题排查 #

完成语法匹配后仍存在取值异常时，可逐一排查以下场景：

• 检查模块解析规则：确认项目配置的模块扩展名匹配规则支持.react.js后缀，保证导入路径填写的后缀与文件实际后缀完全一致，避免路径匹配失败导致的模块加载异常
• 检查导出变量引用：确认functionName在导出位置之后没有被重新赋值为非函数类型的值，避免原函数引用被覆盖
• 排查循环依赖：如果两个文件存在互相导入的逻辑，会因模块加载顺序异常取到未完成初始化的导出值，需调整导入链路，将公共逻辑抽离为独立无依赖的文件

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