Tiptap: 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!