Nuxt抛出错误: 类构造函数i不能在没有'new'的情况下被调用

Question

我正在使用drawflow npm库在我的Vuejs/Nuxtjs应用程序中，但当我启动应用程序时，我遇到了以下错误：

Class constructor i cannot be invoked without 'new'

以下是我按照文档所遵循的步骤：

1. 使用npm i drawflow --save安装drawflow
2. Vue组件代码如下：

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1>Drawflow</h1>
        <div id="drawflow" ref="drawflow" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import Drawflow from 'drawflow'
Vue.use(Drawflow)

export default {
  name: 'App',
  data () {
    return {
    }
  },
  mounted () {
    const id = document.getElementById('drawflow')
    console.log(id)
    this.editor = new Drawflow(id, Vue, this)
    this.editor.start()
  },
  methods: {
  }
}
</script>

<style>
    @import 'drawflow/dist/drawflow.min.css';
</style>

我的nuxt.config.js文件如下：

export default {
  // Global page headers: https://go.nuxtjs.dev/config-head
  head: {
    title: "App | Generator",
    htmlAttrs: {
      lang: "en"
    },
    meta: [
      { charset: "utf-8" },
      { name: "viewport", content: "width=device-width, initial-scale=1" },
      { hid: "description", name: "description", content: "" },
      { name: "format-detection", content: "telephone=no" }
    ],
    script: [],
    link: [
      { rel: "icon", type: "image/x-icon", href: "/Logo.ico" },
      {
        rel: "stylesheet",
        href: "https://cdn.jsdelivr.net/npm/bootstrap-icons@1.3.0/font/bootstrap-icons.css"
      },
      {
        rel: "stylesheet",
        href: "https://unpkg.com/vue-multiselect@2.1.0/dist/vue-multiselect.min.css"
      }
    ]
  },

  // Global CSS: https://go.nuxtjs.dev/config-css
  css: ["@/assets/css/styles.css"],

  // Plugins to run before rendering page: https://go.nuxtjs.dev/config-plugins
  plugins: [
    { src: "~/plugins/bus", mode:"client" }
  ],

  // Auto import components: https://go.nuxtjs.dev/config-components
  components: true,

  // Modules for dev and build (recommended): https://go.nuxtjs.dev/config-modules
  buildModules: [
    // https://go.nuxtjs.dev/eslint
    [
      "@nuxtjs/eslint-module",
      {
        fix: true
      }
    ],
    ["@nuxtjs/dotenv"]
  ],

  // Modules: https://go.nuxtjs.dev/config-modules
  modules: ["@nuxtjs/axios", "bootstrap-vue/nuxt"],

  // Axios module configuration: https://go.nuxtjs.dev/config-axios
  axios: {
    baseURL: process.env.API_URL,
    headers: {
      "Content-Type": "text/plain"
    }
  },

  // Build Configuration: https://go.nuxtjs.dev/config-build
  build: {
    transpile: ["drawflow"]
  },

  server: {
    port: 5000
  },

  vue: {
    config: {
      productionTip: false,
      devtools: true
    }
  }
};

以下是我的.eslintrc.js文件：

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:nuxt/recommended'
  ],
  plugins: [
  ],
  // add your custom rules here
  rules: {}
}

- BATMAN_2008

---

jsconfig 是为 VS Code 设计的，它不会影响应用程序的工作。当您在不应该使用 es5 目标的库中使用它时，常见错误会发生。 - Estus Flask

@EstusFlask 非常感谢您的回复。您能否建议我该怎么做以避免这个问题？ - BATMAN_2008

发布nuxt和babel配置文件供初学者使用。jsconfig与此无关。 - Estus Flask

@EstusFlask 谢谢。我已添加了nuxt.config.js文件内容。然而，我找不到babel config文件。看起来它在我的项目中不存在。请告诉我在哪里可以找到它，我会发帖子的。 - BATMAN_2008

顺便提一下，不要使用 @nuxtjs/dotenv，正如我在之前的一个回答中所解释的那样，它也已经被弃用了。 - kissu

顺便说一下，不要太担心 babel 配置，用 transpile 关键字也是完全可行的。在你的情况下，Nuxt 的默认设置就足够了。我已经成功地让它在任何时候都不需要修改 babel 来运行，因此你也不需要这样做。 - kissu

Answer 1

我已经在相关的Github问题中回答了，如果您想看一下。
与此同时，这里也有答案。

---

你需要按照本节所述的进行转译，不要忘记这一步。

然后，这种代码应该可以让整个事情运行起来。

<template>
  <div class="container-fluid">
    <div class="row">
      <div class="col-sm-12">
        <h1>Drawflow</h1>
        <div id="drawflow-graph" ref="drawflow" />
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  data() {
    return {
      editor: {},
    }
  },
  async mounted() {
    const importedModule = await import('drawflow')
    const Drawflow = importedModule.default
    this.editor = new Drawflow(this.$refs.drawflow, Vue, this)
    this.editor.start()
    this.editor.addNode(
      'github',
      0,
      1,
      150,
      300,
      'github',
      'name',
      'Cool Vue example'
    )
  },
}
</script>

<style>
@import 'drawflow/dist/drawflow.min.css';
#drawflow-graph {
  width: 800px;
  height: 800px;
  border: 2px solid teal;
}
</style>

在我这边完好无损运行。

- kissu