NextJS中UserApi is not a constructor开发环境报错求助

问题场景 #

使用自动生成的OpenAPI代码开发应用时，执行yarn dev浏览器抛出如下错误：

Unhandled Runtime Error
TypeError: fitlify_io_schema__WEBPACK_IMPORTED_MODULE_1_.UserApi is not a constructor

编辑器无报错，执行yarn start构建启动后应用运行正常，仅开发模式下出现该问题。相关代码：

import { UserApi } from "@fitlify-io/schema";
import { baseConfiguration } from "./base";

const userAPI = new UserApi(baseConfiguration);

export default userAPI;

可能原因 #

开发模式下的模块打包工具（如Vite、Webpack）对模块的解析规则与生产模式存在差异：自动生成的OpenAPI代码通常同时提供ESM和CommonJS两种导出格式，开发环境可能优先解析了CommonJS版本，但你的导入语法是ESM的解构导入，导致无法正确获取构造函数。

解决方案 #

方案1：调整导入语法 #

尝试切换为默认导入或直接指定具体模块路径：

// 方式1：使用默认导入后解构
import FitlifySchema from "@fitlify-io/schema";
const { UserApi } = FitlifySchema;

// 方式2：直接导入具体的API文件（需确认包内实际路径）
import { UserApi } from "@fitlify-io/schema/dist/openapi/UserApi";

方案2：配置打包工具的模块解析规则 #

若使用Vite

在vite.config.js中优化依赖解析，强制将包按ESM格式处理：

export default {
  optimizeDeps: {
    include: ['@fitlify-io/schema'],
    esbuildOptions: {
      format: 'esm'
    }
  }
};

若使用Webpack

在webpack.config.js中调整解析优先级，优先读取ES模块：

module.exports = {
  resolve: {
    mainFields: ['module', 'main'], // 先读module字段对应的ESM文件
    extensions: ['.js', '.jsx']
  }
};

方案3：检查OpenAPI代码生成配置 #

如果是你自己生成的OpenAPI代码，可调整生成参数，指定仅生成ESM格式的代码，避免模块格式冲突。比如使用openapi-generator-cli时添加参数：

openapi-generator-cli generate -i openapi.yaml -g typescript-axios --additional-properties=supportsES6=true

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