如何从不同npm包导入同名导出项解决标识符重复声明报错？

以下写法会触发编译/运行报错：

import { Draggable } from "react-beautiful-dnd";
import { Draggable } from "react-draggable";

对应报错信息：

报错原文：Identifier 'Draggable' has already been declared. (3:9)
报错翻译：标识符Draggable已被重复声明，报错位置为代码第3行第9列。

报错本质是JavaScript同一作用域内不允许重复声明同名变量，两个不同npm包导出了同名的Draggable组件，直接按普通命名导入就会触发冲突。

使用ES模块（ESM）原生支持的语法处理命名冲突即可，不需要额外安装依赖，所有符合ESM规范的前端构建工具（Webpack、Vite、Rollup等）都原生兼容，有两种常用写法：

• 写法1：导入时给同名组件起语义化别名
  用as关键字给同名的导入项指定不同的别名，保证同一作用域下标识符唯一，是最常用的处理方式：

  // 可以根据组件来源、使用场景起易区分的别名
  import { Draggable as DndSortDraggable } from "react-beautiful-dnd";
  import { Draggable as FreeDragDraggable } from "react-draggable";
  
  // 后续直接使用别名调用组件即可，功能和原导入完全一致
  // <DndSortDraggable /> 对应react-beautiful-dnd的拖拽组件，多用于列表排序场景
  // <FreeDragDraggable /> 对应react-draggable的拖拽组件，多用于元素自由拖拽场景
  

  别名没有强制命名规范，只要语义清晰、团队成员能快速区分即可。

• 写法2：将整个包导入为命名空间对象
  如果要从同一个包里导入多个导出项，逐个起别名比较繁琐，可以直接把整个包导入为一个命名空间对象，通过对象属性访问对应导出，也能避免命名冲突：

  import * as ReactBeautifulDnd from "react-beautiful-dnd";
  import * as ReactDraggable from "react-draggable";
  
  // 使用时通过命名空间访问对应导出
  <ReactBeautifulDnd.Draggable />
  <ReactBeautifulDnd.Droppable />
  <ReactDraggable.Draggable />
  

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