为什么 @tiptap/prosemirror-tables 依赖项不能在 React 中解析？

Question

过去几天我一直在成功地使用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'

我按照https://tiptap.dev/api/nodes/table#installation上列出的步骤操作。

初始安装:

npm install @tiptap/react @tiptap/starter-kit

表安装:

npm install @tiptap/extension-table @tiptap/extension-table-row @tiptap/extension-table-header @tiptap/extension-table-cell

My React Component.js:这段代码没有表的东西也可以工作

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
}

Answer 1

解决方案非常简单。由于某种原因，@tiptap/prosemror -tables依赖项没有随官方文档中的命令一起安装。所以，我运行了下面的代码，一切正常:

npm install @tiptap/prosemirror-tables

非常简单。

Answer 2

但是当使用npm 7或更高版本时，它不应该自动安装这些吗?事实上，我的本地航班是下午7点。一切正常。但当用力戳时，它就断了。Prod运行npm 14(我希望它能自动安装peer deep)。因此，我必须手动安装所有的prose-mirror软件包。

Answer 3

这个解决方案在NextJs中为我工作，在React中试试:

"dependencies" {

"@tiptap/core": "^2.0.0-beta.207",
"@tiptap/react": "^2.0.0-beta.207",
"@tiptap/starter-kit": "^2.0.0-beta.207",
"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-schema-list": "^1.2.2",
},

我一步一步做的:1 .

yarn add prosemmirror -commands prosemmirror -keymap prosemmirror -model prosemmirror -schema-list prosemmirror -state prosemmirror -transform prosemmirror -view

2。对于start -kit:

yarn add prosemmirror -history prosemmirror -dropcursor prosemmirror -gapcursor

3。Yarn添加@tiptap/core @tiptap/starter-kit

4。添加@tiptap/react