Cell selection errors

[smman89]

Hello!
I use this example:
https://github.com/scrumpy/tiptap/blob/master/examples/Components/Routes/Tables/index.vue

I am trying to select multiple cells in one row and merge them. But when selecting cells, an error occurs:

TypeError: Class constructor Selection cannot be invoked without 'new'
    at new CellSelection (webpack-internal:///./node_modules/prosemirror-tables/dist/index.js:404:15)
    at setCellSelection (webpack-internal:///./node_modules/prosemirror-tables/dist/index.js:1161:21)
    at HTMLDocument.move (webpack-internal:///./node_modules/prosemirror-tables/dist/index.js:1187:20)

Please help solve this problem.

Environment

• OS: Win 7
• Browser Chrome 78
• tiptap: "^1.26.4",
• tiptap-extensions: "^1.28.4",
• vue: "^2.6.10",

[Chrissi2812]

hey @smman89,
does it happen in the example https://tiptap.scrumpy.io/tables, too?
And how do you select the cells? Keyboard, Mouse, or programmatically?

I've tried to reproduce the error but couldn't for now.

[m4n1ok]

Hello @smman89, @Chrissi2812
I had similar issue yesterday. It seems that some dependencies from prosemirror are not transpiled to es5.

My solution right now is to configure webpack to transpile dependencies from prosemirror.

Here it just an example with laravel-mix:

mix.extend('transpileNodeModule', webpackConfig => {
  const { rules } = webpackConfig.module
  rules.filter(rule => rule.exclude && rule.exclude.toString() === '/(node_modules|bower_components)/')
    .forEach(rule => {
      rule.exclude = /node_modules\/(?!(prosemirror-tables|prosemirror-state|prosemirror-view|prosemirror-transform|prosemirror-utils)\/).*/
    })
})

[CantGetRight82]

@Chrissi2812 Selecting with mouse should already do the trick, locally it fails but I cannot reproduce it on the https://tiptap.scrumpy.io/tables link.

@m4n1ok Glad you already found a quick solution! Do you happen to know whether the actual bug is caused by misconfiguration of this project or by projects using it? Thanks!

[CantGetRight82]

Hi @smman89, @Chrissi2812 and @m4n1ok,

I digged a little deeper and it seems most prosemirror dependencies have their main entry refer to 'src/index.js' but prosemirror-tables refers to 'dist/index.js'.

Another solution that seems to work is to override the resolve entry in webpack.config.js:

    resolve: {
        alias: {
            'prosemirror-tables': path.join(__dirname, 'node_modules/prosemirror-tables/src/index.js'),
        }
    },

[tobiasfuhlroth]

In case it helps anyone: adding tiptap to transpileDependencies in vue.config.js resolved the issues with untranspiled classes for me.

transpileDependencies: [
    /[\\/]node_modules[\\/]tiptap.*/
],

[hanspagel]

Thanks for sharing @tobiasfuhlroth!

[kevinmelo]

Still getting the erro :(

[tobychidi-zz]

Just started getting this error in 2022 after dependency updates. It has been working before. I am using Vue 3 and Vite

[OmTheTurtle]

I also started to get this error, and it break the previously working table implementation. I'm using Next.js 12.1.3

[gustavotoyota]

Same thing here, whenever I try to select multiple table cells:

cellselection.js:37 Uncaught TypeError: Class constructor Selection cannot be invoked without 'new'
    at new CellSelection2 (cellselection.js:37:5)
    at setCellSelection (input.js:143:21)
    at HTMLDocument.move (input.js:169:18)

Using Quasar + Vue 3 + Vite

[anton-liubushkin]

The problem seems to be in the new version of prosemirror ProseMirror/prosemirror#1286 (comment)

This is something to watch out for #2854

[bdbch]

@anton-liubushkin yes I already experienced this issue in our tests on the new migration branch, see this comment: #2854 (comment)

[tobychidi-zz]

🕺The issue was fixed for me after latest update

[bdbch]

Great, thanks for letting me know @tobychidi!