Why can't the @tiptap/prosemirror-tables dependency resolve in React?

Question

I have been using TipTap successfully for the last several days. My whole project crashes right when I import the 4 table lines at the top of my component - even before utilizing the table functionality

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'

I followed the steps outlined on https://tiptap.dev/api/nodes/table#installation .

Initial Installation:

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

Table Installation:

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

My React Component.js:

This code works without the table stuff

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>
  );
};

My 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

The solution was real simple. For some reason, the @tiptap/prosemirror-tables dependency wasn't installed with the commands on thier official documentation. So, I ran the following code and everything works just fine:

npm install @tiptap/prosemirror-tables

Very simple.

Answer 2

But should'nt it install those automatically when using npm 7 or higher? Actually, i have npm 7 on my local. Everything works fine. But when pushing to prod, it breaks. Prod runs npm 14 (I expected it to install peer deps automatically). Due to this I had to manually install all prose-mirror packages.

Answer 3

this solution worked for me in NextJs, try in 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",

},

What I did step by step: 1.

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

2.for starter-kit:

yarn add prosemirror-history prosemirror-dropcursor prosemirror-gapcursor

3.yarn add @tiptap/core @tiptap/starter-kit

4.yarn add @tiptap/react