使用Antd组件时出现ResizeObserverCallback重复标识符错误，如何排除库的resize-observer？

针对「Duplicate identifier 'ResizeObserverCallback'」的冲突问题，你可以尝试以下几种方案：

1. 打包工具层面替换/排除Antd的ResizeObserver依赖 #

如果是打包时模块引入冲突，可通过webpack或Vite的别名配置，让Antd使用你的自定义实现或原生API：

Webpack配置 #

在webpack.config.js的resolve.alias中添加：

resolve: {
  alias: {
    // 让Antd使用你的自定义ResizeObserver文件
    'resize-observer-polyfill': path.resolve(__dirname, './path/to/your/resize-observer.js'),
    // 或者直接禁用Antd的polyfill，使用原生ResizeObserver（需确保目标浏览器支持）
    'resize-observer-polyfill': false
  }
}

Vite配置 #

在vite.config.ts的resolve.alias中添加：

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      'resize-observer-polyfill': path.resolve(__dirname, './path/to/your/resize-observer.js'),
      // 或禁用polyfill
      'resize-observer-polyfill': false
    }
  }
});

2. TypeScript类型冲突处理 #

如果是TypeScript类型定义重复，可调整tsconfig.json：

• 在compilerOptions.types中指定仅使用你的类型定义，排除Antd相关的ResizeObserver类型：

{
  "compilerOptions": {
    "types": ["./path/to/your/resize-observer-types.d.ts"]
  }
}

• 或者在你的类型文件中使用声明合并，覆盖冲突的类型：

declare global {
  type ResizeObserverCallback = (entries: ResizeObserverEntry[], observer: ResizeObserver) => void;
}
export {};

3. 补丁修改Antd的依赖逻辑（应急方案） #

使用patch-package工具修改Antd内部的ResizeObserver引入逻辑：

1. 安装patch-package：npm install patch-package --save-dev
2. 找到Antd源码中引入resize-observer-polyfill的文件（通常在Table组件的相关代码中），修改为条件引入（仅当原生不支持时加载）：

import ResizeObserver from 'resize-observer-polyfill';

// 改成：
const ResizeObserver = window.ResizeObserver || require('resize-observer-polyfill').default;

3. 运行npx patch-package antd生成补丁，后续安装依赖时会自动应用该补丁。

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