Tiptap: [Vue warn] : Class constructor Node cannot be invoked without 'new'

[madebycaliper]

Describe the bug
Vue compiler complains when trying to follow any examples with custom extensions

Steps to Reproduce / Codesandbox Example
Steps to reproduce the behavior:

1. create Iframe.js in src/components/ directory using the code here
2. add import Iframe from '../Iframe.js' in Vue component
3. add new Iframe() under extensions in Tiptap Editor initialization

Expected behavior
a new Extension class should be made available for import into the Tiptap instance

Screenshots
n/a

Environment

• OS: Mac OS 10.14.6
• Browser : Chrome
• Version: 86.0.4238.2
• Desktop
  
  
  
  • Vue.js 2.6.10
  
  
  • "tiptap": "^1.29.6",
  
  
  • "tiptap-extensions": "^1.32.5",
  
  

Additional context
Something tells me this has to do with eslint or babel config settings but I'm not sure where to start. that kind of config is a bit over my head. I've done some searching on how to enable ES6 classes in a Vue setup but couldn't figure it out after trying for a couple hours. Thanks!

[madebycaliper]

Update: I was finally able fix this problem by installing @babel/preset-env and adding it as a Babel preset. I cloned this repo and poked around the Babel config and package.json file for some clues, trial and error and eight hours later...

It would be _extremely_ helpful to add this to the docs!

For anyone who has this problem in the future, this is all it took to get things working 🤦 :

Original Babel config file

// .babelrc
module.exports = {
  presets: [['@vue/app']],
}

Updated to allow usage of js classes

// .babelrc
module.exports = {
  presets: [['@vue/app'], ['@babel/preset-env']],
}

[hanspagel]

Thanks for sharing!

[madebycaliper]

@hanspagel this issue is fixed but I actually just found out the build fails when I deploy. It throws the error:

ReferenceError: regeneratorRuntime is not defined

trying to track it down with some Babel config shenanegans...wish there was an easy config to integrate Tiptap into existing Vue projects that don't use JS classes already.

[madebycaliper]

Another update here: I'm still doing some QA to make sure everything is working properly, but it seems the @babel/transform-runtime Babel plugin allows the site to work in production/build:

// .babelrc.js
module.exports = {
  presets: [
    ['@vue/app'],
    ['@babel/preset-env'],
  ],
  plugins: ['@babel/transform-runtime'],
}

_Solution found in this comment: https://github.com/vuejs/vue-apollo/issues/301#issuecomment-450625708_

If anyone on the Tiptap teams knows why this works I'd love to understand so I can troubleshoot in the future. Thanks!

[hanspagel]

We had this with await/async in tiptap and solved it by adding this to the package.json, to remove support for IE:

{
  "browserslist": [
    "> 1%",
    "last 2 versions"
    "last 2 versions",
    "not IE <= 11",
    "not IE_Mob <= 11"
  ]
}

I don’t know if that’s needed for classes, probably it is. Didn’t have this issue before. 🤷🏻

[madebycaliper]

@hanspagel thanks for the follow up. Unfortunately using the browserlist config above without the @babel/preset-env and @babel/transform-runtime doesn't work. It seems the updated Babel config above is necessary to allow the use of classes.

It's possible that my project config is a bit odd compared to some other users, but its not THAT weird, I imagine, since I've been using a variation on Chris Fritz's Vue Enterprise Boilerplate for about 2 years and never ran into this problem. (I've also never tried using typescript or JS classes).

I'd be interested in hearing if anything else related to this issue crops up and how it was addressed in other setups.

[tobiasfuhlroth]

@madebycaliper @hanspagel I don't think that @babel/preset-env is the key to the solution here, as @vue/cli-plugin-babel (given that you use vue-cli) already configures a project like that.

See https://github.com/ueberdosis/tiptap/issues/521#issuecomment-698250601 for the solution that worked for me.

[madebycaliper]

@tobiasfuhlroth thanks for this. I'll investigate when I have a chance 👍