Selecting cells in table causes "Class constructor Selection cannot be invoked without 'new'" error

[vuduongq]

Selecting cells in a table causes the error "Class constructor Selection cannot be invoked without 'new'". This is the output from the source inspector where the error occurs:

var CellSelection = (function (Selection) {
  function CellSelection($anchorCell, $headCell) {
    if ( $headCell === void 0 ) $headCell = $anchorCell;

    var table = $anchorCell.node(-1), map = TableMap.get(table), start = $anchorCell.start(-1);
    var rect = map.rectBetween($anchorCell.pos - start, $headCell.pos - start);
    var doc = $anchorCell.node(0);
    var cells = map.cellsInRect(rect).filter(function (p) { return p != $headCell.pos - start; });
    // Make the head cell the first range, so that it counts as the
    // primary part of the selection
    cells.unshift($headCell.pos - start);
    var ranges = cells.map(function (pos) {
      var cell = table.nodeAt(pos), from = pos + start + 1;
      return new prosemirrorState.SelectionRange(doc.resolve(from), doc.resolve(from + cell.content.size))
    });
    Selection.call(this, ranges[0].$from, ranges[0].$to, ranges);
    // :: ResolvedPos
    // A resolved position pointing _in front of_ the anchor cell (the one
    // that doesn't move when extending the selection).
    this.$anchorCell = $anchorCell;
    // :: ResolvedPos
    // A resolved position pointing in front of the head cell (the one
    // moves when extending the selection).
    this.$headCell = $headCell;
  }

Seems like it does not get a Selection instance correctly.

I have added the plugins columnResizing(), tableEditing() in this order.

Adding and resizing the table works fine.

Did I miss something?
Best regards
Vu

[AnthonyWeston]

So I poked around at this, and came up with the following:

It looks like this project uses buble to transpile the code into es5 compliant code. When I try to create a CellSelection by clicking and dragging across cells in a table, I get errors on the following line in cellselection.js:

super(ranges[0].$from, ranges[0].$to, ranges)

which transpiles to:

Selection.call(this, ranges[0].$from, ranges[0].$to, ranges);
// Error: Class constructor Selection cannot be invoked without 'new'

It appears they have an issue open for this bug: bublejs/buble#130

[mbostler]

Just stumbled into the same error today and seeing this has been open for a while... are there any known workarounds to this issue?

[hadielyakhni]

@mbostler Also noticed this problem today! A solution might be to tell webpack to transpile them down to es5 ueberdosis/tiptap#521 - I'll try that

[kevinmelo]

Still with the same problem :/

[bdbch]

This issue seems to be back. Over at tiptap I'm currently trying to port our typings over to the new versions of prosemirror - but since updating, I receive the same error.

Seems like this is also happening in other editor components / frameworks, see:

nhn/tui.editor#2537

[mbostler]

@hadielyakhni et all

Can confirm that simply replacing buble with babel to do the transpiling seems to do the trick for me.

Published the package on npm as prosemirror-tables-contently.

After linking to this package I have yet to see the Cell Selection issues appear.

Diff between the fork and base is currently public and can be seen here: master...contently:master

[bdbch]

Great one @mbostler

Could someone from the prosemirror maintainment team take a look into this? Seems to break the functionality of prosemirror for quite a few people.

If this is done I can finish my port to the new versions for Tiptap - would love to do that as soon as possible. Thanks already 🙏

[nguyenphuc-minhlong]

You can use @mbostler package by adding resolutions or overrides in package.json like this:

    "overrides": {
        // Your config...
        "prosemirror-tables": {
            "prosemirror-tables-contently": "1.1.2"
        }
    },
    // OR
   "resolutions": {
        // Your config...
        "prosemirror-tables": "npm:prosemirror-tables-contently"
    },

then remove node_modules/ folder and re-install all packages.

It works for me.

[ryanb]

It appears prosemirror-tables-contently doesn't work with Common JS which is what I'm using in my Node.js (yjs collab) server. I get this error when attempting to load the latest version of tiptap-extension-table.

/Users/rbates/code/collab-server/packages/tiptap-base/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.cjs.js:7
var prosemirrorTablesContently = require('prosemirror-tables-contently');
                                 ^

Error [ERR_REQUIRE_ESM]: require() of ES Module /Users/rbates/code/collab-server/packages/tiptap-base/node_modules/prosemirror-tables-contently/dist/index.js from /Users/rbates/code/collab-server/packages/tiptap-base/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.cjs.js not supported.
index.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename index.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /Users/rbates/code/collab-server/packages/tiptap-base/node_modules/prosemirror-tables-contently/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).

    at Object.<anonymous> (/Users/rbates/code/collab-server/packages/tiptap-base/node_modules/@tiptap/extension-table/dist/tiptap-extension-table.cjs.js:7:34)
    at async Promise.all (index 0) {
  code: 'ERR_REQUIRE_ESM'
}

Node.js v18.0.0

@mbostler is it possible to remove "type": "module" from the package.json in prosemirror-tables-contently so it works with Common JS? The prosemirror-tables package.json doesn't have this line.

Update: Oops, I was mistaken, the older version of prosemirror-tables I was using doesn't have that line but looks like it does now. Hmm, perhaps I need to change my build then.

[MH4GF]

We have forked and resolved to use prosemirror-tables in our product. The ERR_REQUIRE_ESM issue was resolved this way, I hope this helps: bitjourney#2

I will gladly submit a PR if prosemirror-tables maintenance is resumed.

[cary-hu]

Is there any update? I meet this problem in other editor built with ProseMirror.
https://github.com/nhn/tui.editor

[ocavue]

Could anyone provide me a minimal reproduction git repo or codesandbox link? I will look into it once I can reproduce it.

[cary-hu]

Hi， @ocavue
I have fixed this issue, Problem in my project is I use ES modules as module system, And use webpack + babel compile the module to use in browser.

A fixed configuration for webpack + babel here:

Hope those infomation make help.

[ocavue]

Glad to hear that. I will close this issue since it's unlikely a remirror bug.