Nuxt 抛出：Class 构造函数 i 不能在没有 'new' 的情况下被调用

Question

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

Class constructor i cannot be invoked without 'new'

以下是我按照 documentation 遵循的步骤：

使用 npm i drawflow --save

drawflow

Vue Component 代码如下：

<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: {}
}

Answer 1

我已经在相关的Github issue里回答了，要看的话
同时，这里也有答案。

您需要不要忘记按照 this section 中的说明进行转译。

那么，这种代码应该可以让整个事情正常进行

<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>

在我这边工作得很好

Nuxt 抛出：Class 构造函数 i 不能在没有 'new' 的情况下被调用

Nuxt throws: Class constructor i cannot be invoked without 'new'

javascript

vue.js

visual-studio-code

vuejs2

nuxt.js