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

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

我的 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/prosemirror-tables 依赖项未随其官方文档中的命令一起安装。所以，我运行了以下代码，一切正常：

npm install @tiptap/prosemirror-tables

很简单的。

Answer 2

但是它不应该在使用 npm 7 或更高版本时自动安装那些吗？ 实际上，我本地有 npm 7。一切正常。但是当推动生产时，它会破裂。 Prod 运行 npm 14（我预计它会自动安装 peer deps）。因此，我不得不手动安装所有 prose-mirror 包。