React中@tiptap/prosemirror-tables依赖无法解析的问题求助
Tiptap引入表格扩展后项目崩溃,提示无法解析@tiptap/prosemirror-tables模块
我已经正常使用Tiptap多日,但在组件顶部引入4个表格相关扩展后,项目直接崩溃——还没使用任何表格功能就触发了报错:
ERROR in ./node_modules/@tiptap/extension-table/dist/tiptap-extension-table.esm.js 2:0-280 Module not found: Error: Can't resolve '@tiptap/prosemirror-tables' in '/my_project/node_modules/@tiptap/extension-table/dist'
我严格按照官方步骤操作:
- 初始安装命令:
npm install @tiptap/react @tiptap/starter-kit
- 表格扩展安装命令:
npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell
以下是我的React组件代码(移除表格相关代码后可正常运行):
import { EditorContent, useEditor } from "@tiptap/react"; import StarterKit from "@tiptap/starter-kit"; import Table from "@tiptap/extension-table"; import TableCell from "@tiptap/extension-table-cell"; import TableHeader from "@tiptap/extension-table-header"; import TableRow from "@tiptap/extension-table-row"; export default () => { const editor = useEditor({ extensions: [ StarterKit, Table.configure({ class: "tiptap-table", resizable: true, }), TableRow, TableHeader, TableCell, ], content: 'example text', }); return ( <div className="tiptap"> <EditorContent editor={editor} className="tiptap-editor" /> </div> ); };
我的package.json依赖配置:
{ "name": "project-name", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", "@tiptap/extension-bold": "^2.0.0-beta.204", "@tiptap/extension-bullet-list": "^2.0.0-beta.204", "@tiptap/extension-character-count": "^2.0.0-beta.204", "@tiptap/extension-document": "^2.0.0-beta.204", "@tiptap/extension-history": "^2.0.0-beta.204", "@tiptap/extension-italic": "^2.0.0-beta.204", "@tiptap/extension-link": "^2.0.0-beta.204", "@tiptap/extension-list-item": "^2.0.0-beta.204", "@tiptap/extension-ordered-list": "^2.0.0-beta.204", "@tiptap/extension-paragraph": "^2.0.0-beta.204", "@tiptap/extension-placeholder": "^2.0.0-beta.204", "@tiptap/extension-strike": "^2.0.0-beta.204", "@tiptap/extension-table": "^2.0.0-beta.209", "@tiptap/extension-table-cell": "^2.0.0-beta.209", "@tiptap/extension-table-header": "^2.0.0-beta.209", "@tiptap/extension-table-row": "^2.0.0-beta.209", "@tiptap/extension-text": "^2.0.0-beta.204", "@tiptap/extension-underline": "^2.0.0-beta.204", "@tiptap/react": "^2.0.0-beta.202", "@tiptap/starter-kit": "^2.0.0-beta.202", "classnames": "^2.3.2", "dompurify": "^2.4.1", "prosemirror-commands": "^1.5.0", "prosemirror-dropcursor": "^1.6.1", "prosemirror-gapcursor": "^1.3.1", "prosemirror-history": "^1.3.0", "prosemirror-keymap": "^1.2.0", "prosemirror-model": "^1.18.3", "prosemirror-schema-list": "^1.2.2", "prosemirror-state": "^1.4.2", "prosemirror-transform": "^1.7.0", "prosemirror-view": "^1.29.1", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.4.3", "react-scripts": "5.0.1", "sass": "^1.57.1", "scss": "^0.2.4", "start": "^5.1.0", "web-vitals": "^2.1.4", "yup": "^0.32.11" }, ... other stuff }
内容的提问来源于stack exchange,提问作者James Hendrie
相关产品推荐
相关产品推荐

