Nuxt 抛出错误：未捕获的 TypeError：无法将类作为函数调用

Posted 2023-02-16

【中文标题】Nuxt 抛出错误：未捕获的 TypeError：无法将类作为函数调用

【英文标题】：Nuxt throwing error : Uncaught TypeError: Cannot call a class as a function

【发布时间】：2021-12-23 03:48:56

【问题描述】：

我在Vuejs/Nuxtjs 应用程序中使用drawflow npm library，但是当我启动应用程序时，我的控制台中出现以下错误：

classCallCheck.js:3 Uncaught TypeError: Cannot call a class as a function
    at _classCallCheck (classCallCheck.js:3)

以下是我按照文档执行的步骤：

使用npm i drawflow --save 安装drawflow 在plugins文件夹下创建drawflow.js文件并添加代码：

import Vue from 'vue'
import Drwaflow from 'drawflow'
Vue.use(Drwaflow)

修改nuxt-config.js文件并添加plugin并构建：

plugins: [
     src: "~/plugins/drawflow", mode:"client" 
  ],

  build: 
    transpile: ["drawflow"]
  ,

我的Vue Component 在Mounted 功能中有以下功能：

  async mounted () 
    const vm = this

    if (process.browser) 
      const Drawflow = await require('drawflow')
      // const styleDrawflow = await require('drawflow/dist/drawflow.min.css')
      Vue.use(Drawflow)

      const id = document.getElementById('drawflow')
      console.log(id)
      vm.editor = new Drawflow(id, Vue, vm)
      vm.editor.start()
    
  

不明白这里出了什么问题。找不到Nuxt 的任何相关帖子。有人可以解释一下这段代码有什么问题吗？

【问题讨论】：

如果全局需要，可以在插件中加载它，或者使用 import 语法在本地加载它（就像你上次那样）。

@kissu 非常感谢您的回复。我什至尝试过local import，但我得到了一个不同的错误：***.com/q/69915969/7584240

@kissu 我删除了plugin/drawflow.js 和nuxt-config.js，所以我可以在本地导入它，但即便如此我也遇到了问题。

【参考方案1】：

即使这个问题可以做更多的工作，最后，OP 希望让它在本地工作。 此用例的解决方案是 available here，并使用我的 PoV。

因此，我不建议采用插件路径来防止它在全球的整个 SPA 中可用。