升级TypeScript与tslib后Vue导出缺失default属性问题求助

你遇到的问题是TypeScript 4.x与tslib 2.x对ES模块和CommonJS模块的互操作逻辑变更导致的，和Vue 2本身的导出形式有关：

• Vue 2的源码与类型声明均采用export = Vue的CommonJS规范导出，原生没有ES模块的default导出
• TypeScript 4.1之后调整了esModuleInterop的实现逻辑，对export =形式的模块导入时的包装策略更严格，不会自动将模块命名空间等同于默认导出值
• tslib 2.x中的_interopDefaultLegacy辅助函数逻辑和1.x版本存在差异：1.x会直接将无default属性的模块值作为默认导出返回，2.x会统一将其包装为{default: 原模块值}的结构，导致你导出的命名导出Vue实际是包装后的对象，而非原始Vue构造函数

你之前添加配置后未生效，是因为组件库的导出逻辑没有适配新的包装规则，即使开启esModuleInterop，导入的Vue依然是被包装后的对象，直接命名导出后下游拿到的就不是可实例化的构造函数。

按改造成本从低到高排序：

方案1：修改组件库的Vue导入逻辑（最推荐，无需改动下游项目） #

显式判断导入的Vue对象是否存在default属性，兼容新旧包装逻辑，修改你的导入导出代码如下：

// 替换原有import Vue的写法
import * as VueNS from "vue";
import { Component as VueComponent, ComponentOptions, CreateElement, RenderContext, VNode } from "vue";

// 兼容处理，优先取default属性，降级取整个命名空间对象
const Vue = (VueNS as any).default || VueNS;

export default Vue;
export {
  Vue,
  // ... 其他组件
};

该方案可以直接适配新旧版本的ts与tslib的包装逻辑，下游无需做任何修改即可正常使用import { Vue } from "my-component-package"的写法。

方案2：统一调整组件库编译配置 #

如果不想改业务代码，需要在组件库的tsconfig.json中添加以下配置，注意要确保模块配置完全匹配：

{
  "esModuleInterop": true,
  "allowSyntheticDefaultImports": true,
  "module": "CommonJS",
  // 可选，避免Vue类型声明和导出规则的冲突报错
  "skipLibCheck": true
}

如果你的组件库是用webpack/rollup打包的，还需要额外添加导出配置：

• webpack场景：在output配置中添加libraryExport: "default"
• rollup场景：在output配置中添加exports: "named"

方案3：下游项目适配（不推荐，需要修改所有调用逻辑） #

如果暂时无法修改组件库代码，下游可以调整导入写法：

// 方式1：导入默认导出
import Vue from "my-component-package";
// 方式2：取default属性后再使用
import * as MyPkg from "my-component-package";
const Vue = (MyPkg.Vue as any).default || MyPkg.Vue;

export const Sth = new Vue();

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