javascript - （Laravel/Vue/Tiptap）TypeError：没有'new'就不能调用类构造函数”

Question

我正在 Laravel/Vue 中开发一个应用程序，对于一个特定的组件，我需要一个自定义版本的扩展“Mention”到文本编辑器包“Tiptap”。我在一个单独的 .js 文件中创建了一个新类，它扩展了 Mention 以包含我需要的功能，如下所示：

import { Mention } from 'tiptap-extensions';

export default class SpecialMention extends Mention {
    constructor(props) {
        super(props);
    }
    get name() {
        //
    }
    get schema() {
        //
    }
}

在代码中构造一个对象，如下所示：

import SpecialMention from './SpecialMention';

new SpecialMention({
    matcher: {
        char: '@',
        allowSpaces: true,
        startOfLine: false,
    },
    items: vm.prepareItems(vm.properties, "property"),
    ...extensionFunctions
}),

虽然代码编译没有问题，但我遇到了以下运行时错误：

"TypeError: Class constructor Mention cannot be invoked without 'new'"

我以前看到过这个问题，他们倾向于指出 Babel 是原因。不幸的是，我对 Babel 完全不熟悉。我尝试将其回滚，但没有成功，并根据类似问题的解决方案将target.esmodules 和 targets.node 配置为 true （在 package.json 中）：

"babel": {
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "node": true,
                    "esmodules": true
                }
            }
        ]
    ],
    "plugins": [
        "@babel/plugin-proposal-optional-chaining"
    ]
}

这是转译的代码 - 失败在最后一行：

  function SpecialMention() {
    _classCallCheck(this, SpecialMention);

    return _possibleConstructorReturn(this, _getPrototypeOf(SpecialMention).apply(this, arguments));
  }

但是，我仍然得到相同的运行时错误。有谁可能是什么解决方案？非常感谢。

标签： javascriptvue.jsclass