Tiptap table extension does not work properly

[martynaskre]

Flux version

v2.2.1

Livewire version

v3.6.3

Tailwind version

v4.1.11

Browser and Operating System

Chrome on MacOS

What is the problem?

When registering a table extension for Tiptap, multiple errors occur, potentially due to mismatched versions of prosemirror-view, as discussed here. The Flux documentation should specify the exact versions of Tiptap and its extensions being used or ideally, include a package-lock.json file so developers can ensure proper version alignment.

The documentation provides an example of installing @tiptap/extension-youtube at version 2.11.7. I attempted to install the tables plugin at the same version and manually override prosemirror-view to version 1.37.0, but the issues persisted.

Code snippets to replicate the problem

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";

document.addEventListener("flux:editor", (e) => {
    e.detail.registerExtension(Table.configure({ resizable: true }));
    e.detail.registerExtension(TableRow.configure());
    e.detail.registerExtension(TableCell.configure());
    e.detail.registerExtension(TableHeader.configure());
});

Screenshots/ screen recordings of the problem

This is a simple example which adds a table.

Screen.Recording.2025-07-11.at.14.33.07.mov

How do you expect it to work?

The Tiptap itself should not throw any errors.

Please confirm (incomplete submissions will not be addressed)

• I have provided easy and step-by-step instructions to reproduce the bug.
• I have provided code samples as text and NOT images.
• I understand my bug report will be closed if I haven't met the criteria above.

[joshhanley]

@martynaskre thanks for reporting! So I've just tested this out and it seems like this is a common pain with ProseMirror and by extension - TipTap. Flux is currently using v2.11.7 as you correctly found.

Even having the Flux editor javascript source, I still couldn't get versions to match up between what we have in Flux and what is in my test app.

The biggest culprit for this issue specifically is prosemirror-view. But even when I installed it manually in my app I still couldn't get it to resolve properly as some sub-dependencies of the table extensions and the TipTap PM extension were all using different versions.

npm install prosemirror-view@1.38.1 @tiptap/pm@2.11.7  @tiptap/extension-table@2.11.7 @tiptap/extension-table-row@2.11.7 @tiptap/extension-table-header@2.11.7 @tiptap/extension-table-cell@2.11.7 

See below how most are using v1.38.1 but one of them is using v1.40.0...

When I run update on the TipTap extensions in Flux, the sub-dependencies are still out of date.

So I'm not really sure how we are going to solve this problem.

Like we could document which TipTap version we are using - which is a bit of a pain as we'd have to update the documentation each time we update our dependencies. But it still won't prevent there being possible mismatches for sub-dependencies.

In terms of including a package-lock.json file, I think this might be a good idea, but I have no idea how that would work. Currently Flux Pro is installed using composer, not NPM, so applications don't have any access to that information.

So if you have any ideas on how we might be able to implement that, we'd appreciate that. I think it would be a better solution than trying to keep the documentation version up to date.

For reference this is what is currently installed in Flux Pro

[joshhanley]

Ok I've explored this some more and the only way I could get this to work without the error is by including the table extensions directly in Flux Pro. We'll have to work out whether we're willing to support having the table extension built in out of the box.

[martynaskre]

@joshhanley thanks for investigating this. To what version prosemirror-view gets resolved when you directly install tables extension in Flux Pro?

Regarding the package-lock.json file — it might be helpful to include it within the Flux Pro package, perhaps alongside the composer.json file.

[joshhanley]

@martynaskre no worries! If I just installed it, it did the latest v2 version. But if I installed tables v2.11.7 it installs prosemirror-view v1.38.1.

Yeah we could possibly include that. How will that help NPM in your app ensure dependency versions are managed?

[martynaskre]

@joshhanley what output do you get when you run npm ls prosemirror-view directly inside the Flux Pro package with the tables extension installed?

I've already overridden prosemirror-view to version 1.38.1 in package.json, but I'm still seeing those errors.

As for package-lock.json, it might help partially, but in my case, I wouldn’t even need to open an issue to find out the exact versions 😄

[martynaskre]

@joshhanley I did some further investigation and it seems the root of the issue is a version mismatch with prosemirror-tables, which isn't included in the Flux Pro build.

To work around this, I manually externalized all prosemirror-tables dependencies using Vite:

    build: {
        rollupOptions: {
            external: [
                '@tiptap/pm/model',
                '@tiptap/pm/view',
                '@tiptap/pm/state',
                '@tiptap/pm/keymap',
                '@tiptap/pm/transform',
            ],
            output: {
                paths: {
                    '@tiptap/pm/model': '/test.js',
                    '@tiptap/pm/view': '/test.js',
                    '@tiptap/pm/state': '/test.js',
                    '@tiptap/pm/keymap': '/test.js',
                    '@tiptap/pm/transform': '/test.js',
                },
            },
        },
    },

The test.js file contains a copy of Flux Pro's editor.module.js with added export statements for prosemirror's functions and classes. This externalization does not produce any errors, but the final build of editor doesn't contain required extensions for tables, so the issue still persists.

Maybe the solution is to export every @tiptap/pm module inside the final build of editor and then append the docs for this externalization procedure? Note: I have tested this only on ES builds, so for UMD builds the process would be a bit different (the @tiptap/pm should live inside window.TipTapPM for example, and the bundler would do needed procedures).

As I don't have access to internal code, the fix for this is not clear, but I strongly think that the issue is within the version of prosemirror-tables.

[joshhanley]

@martynaskre sorry about the delay! Yep that's what I was finding too. I think we will need to bundle it to make sure the tables plugin and the editor core are all the same version. That's the only way I can see to ensure the versions all match. I'll have to run it past Caleb first and see what he thinks.

[martyf]

Tables would be absolutely awesome to include - got my vote.

[git-alfacc]

IT:
Sto riscontrando lo stesso problema e avrei urgenza di risolverlo. quali sono le soluzioni trovate fino ad'ora?

EN:
I'm having the same problem and urgently need to fix it. What solutions have you found so far?

[joshhanley]

What's being reported

Users are unable to register TipTap table extensions (@tiptap/extension-table, etc.) with the Flux editor component. When they install these extensions in their own app and register them via the flux:editor event, ProseMirror throws errors due to duplicate module instances.

Root cause analysis

This is a classic ProseMirror duplicate module problem. Here's what's happening:

1. Flux bundles everything — build.js uses esbuild to bundle editor.js into dist/editor.module.js. This bundle includes the full ProseMirror dependency tree (view, model, state, tables, etc.) from @tiptap/pm@2.11.7.

2. Users install their own TipTap extensions — When a user runs npm install @tiptap/extension-table, that package brings its own @tiptap/pm dependency, which resolves to potentially different ProseMirror package versions.

3. Two separate copies exist at runtime — The user's Vite/Webpack build bundles the table extension with its copy of ProseMirror, while the Flux editor already has its own bundled copy. ProseMirror uses instanceof checks internally (e.g., to verify EditorView, Node, Schema instances), and these checks fail across copies because they're literally different class constructors.

4. @tiptap/pm already includes prosemirror-tables — Interestingly, @tiptap/pm/tables re-exports everything from prosemirror-tables, and it's already resolved in Flux's node_modules. So the ProseMirror tables code is already bundled inside Flux's editor build — but there's no TipTap extension layer wrapping it.

The fundamental constraint

Because Flux ships pre-built JS bundles via Composer (not npm), there's no way for users to share the same ProseMirror instance with their own TipTap extensions. The user's bundler will always resolve a separate copy.

Proposed fix

Bundle the TipTap table extensions (@tiptap/extension-table, @tiptap/extension-table-row, @tiptap/extension-table-cell, @tiptap/extension-table-header) directly into Flux Pro's editor build as disabled-by-default extensions, so they share the same ProseMirror instance. Users would then enable them via editorHooks.enableExtension() rather than installing them separately.

This would involve:

• Installing the table extension packages pinned to the same version range as the other TipTap packages.
• Importing and adding them to disabledExtensions in js/editor.js so they're available but not active until the user opts in.
• Exposing table toolbar commands — insertTable, deleteTable, addColumnBefore/After, deleteColumn, addRowBefore/After, deleteRow, toggleHeaderRow, toggleHeaderColumn, mergeOrSplit, etc.
• Adding table styles to dist/editor.css — borders, cell padding, resizable handles.

Trade-offs:

• Bundle size increase — The table extension adds to editor.module.js size even for users who don't use tables. However, since the extensions would be in disabledExtensions by default, the runtime cost is minimal — it's only bundle size.
• Maintenance — Another set of extensions to keep in sync with TipTap version updates, but this is already the case for the existing extensions.

Alternative considered:

Externalising @tiptap/pm modules from the Flux build and having users import them — this is what @martynaskre investigated. It's fragile, requires complex Vite config from users, and still doesn't fully resolve the version matching problem.

Analysis by Claude

[stuartbrameld]

@joshhanley could you also bundle the extension-image extension, or upgrade tiptap to the latest version in flux? recent extensions require tiptap core v3, but seems like flux bundles v2.

Found the root cause. The @tiptap/extension-image is v3.13.0 which requires @tiptap/core v3.x as a peer dependency. But Flux Pro 2.5 bundles TipTap v2.x internally. This version mismatch is why addNodeView(...) is not a function - the v3 extension API is incompatible with v2 core.