NextJS中返回函数的query函数无法导入，提示非函数错误

问题描述 #

我在api.ts文件中定义了如下泛型query函数，在该文件内可正常使用：

export const query = <C extends ControllerConfig>( path: string ): ((args?: C['args']) => Promise<C['payload']>) => { 
  return async (args?: C['args']): Promise<C['payload']> => { 
    const { body, ...rest } = args; 
    if (body) throw new Error('Body not processed in query operation'); 
    path = pathFromArgs(path, rest); 
    const { data } = await client.get<C['payload']>(path); 
    return data; 
  }; 
};

但将其导入到club.api.ts文件中调用const getClubs = query<GetClubs>('/clubs/');时，出现运行时错误：

TypeError: (0 , ___WEBPACK_IMPORTED_MODULE_0__.query) is not a function

若将该函数直接移至club.api.ts内则可正常运行，请问这是NextJS或Webpack配置导致的问题吗？

可能的原因及解决办法 #

• 循环导入问题：检查api.ts与club.api.ts之间是否存在循环引用（比如api.ts间接引入了club.api.ts的内容），这会导致模块加载时query函数还未完成初始化。
  • 解决：梳理模块依赖链，移除循环引用；或者将共享的类型、工具函数抽离到独立的公共文件中。
• NextJS环境差异问题：如果api.ts属于服务端模块（比如API路由、服务端组件），而club.api.ts在客户端组件中使用，可能因环境差异导致client实例或函数初始化异常。
  • 解决：确保client（如axios实例）在对应环境中正确初始化；若使用App Router，可在club.api.ts顶部添加'use client'指令，明确标记为客户端组件。
• Webpack模块解析/Tree-shaking问题：Webpack可能因路径配置错误（如大小写不一致、别名配置错误）无法正确解析模块；或者误判query函数未被使用，将其从打包结果中移除。
  • 解决：检查tsconfig.json和next.config.js中的路径别名配置；确保query函数的导出和导入方式正确，避免被Tree-shaking误删；可临时在next.config.js中添加optimization: { usedExports: false }排查是否为Tree-shaking导致的问题。
• 类型定义跨模块问题：虽然报错是运行时，但如果ControllerConfig或GetClubs的类型定义存在跨模块引用异常，可能间接引发模块加载问题。
  • 解决：检查类型定义文件的导出/导入逻辑，确保两个文件中引用的ControllerConfig是同一个类型。

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