使用ngx-tiptap浮动/气泡菜单时遇tippy_js函数错误求助

问题根源 #

这个错误核心是ngx-tiptap浮动菜单组件依赖的tippy.js版本与你项目当前使用的版本不兼容。你提到提及功能和自定义扩展能正常使用tippy，说明tippy已安装，但浮动菜单组件的调用逻辑（直接将tippy作为函数执行）和高版本tippy的导出结构不匹配（比如tippy.js v7默认导出是对象而非函数）。

解决方案 #

1. 统一tippy.js到兼容版本 #

ngx-tiptap（尤其是v1.x系列）通常依赖tippy.js v6版本，若你安装了v7+版本就会触发该错误：

• 查看当前tippy版本：

  npm list tippy.js
  

• 卸载当前版本，安装兼容的v6版本：

  npm uninstall tippy.js
  npm install tippy.js@^6.3.7 --save
  

2. 确认模块导入配置正确 #

确保你的Angular模块中正确导入浮动菜单模块：

import { TiptapEditorModule, TiptapFloatingMenuModule } from 'ngx-tiptap';

@NgModule({
  declarations: [/* 你的组件 */],
  imports: [
    // 其他必要模块
    TiptapEditorModule,
    TiptapFloatingMenuModule
  ]
})
export class YourFeatureModule { }

3. 清理缓存并重新构建 #

缓存可能导致模块导入异常，执行以下命令清理重建：

npm cache clean --force
rm -rf node_modules package-lock.json
npm install
ng build --delete-output-path

4. 检查自定义扩展的tippy使用 #

如果你的自定义扩展手动处理了tippy导入，确保没有覆盖全局导出。tippy.js v6的正确导入调用方式是：

import tippy from 'tippy.js';
// 直接调用函数
tippy(element, options);

而v7需要调用tippy.default，若浮动菜单组件未做兼容就会报错，因此统一到v6版本是最稳妥的方案。

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