Nuxt使用drawflow库报错Class constructor i cannot be invoked without 'new'如何解决

• 核心原因1：drawflow本身不是Vue插件，代码中调用Vue.use(Drawflow)属于错误用法，会触发类直接调用的逻辑
• 核心原因2：Nuxt服务端渲染模式下，drawflow作为仅支持客户端运行的库，在服务端被加载时会触发转译异常，ES6类没有被正确处理，导致调用时提示需要用new关键字
• 额外原因：drawflow的dist编译产物是UMD格式，和Nuxt默认的Babel转译规则存在兼容性冲突

步骤1：修改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'
// 移除错误的Vue.use(Drawflow)代码

export default {
  name: 'App',
  data () {
    return {
      editor: null
    }
  },
  async mounted () {
    // 仅在客户端侧加载drawflow
    if(process.client) {
      const Drawflow = (await import('drawflow/src/Drawflow')).default
      // 直接用$refs获取dom，更符合Vue用法
      const drawflowDom = this.$refs.drawflow
      this.editor = new Drawflow(drawflowDom, Vue, this)
      this.editor.start()
    }
  }
}
</script>

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

步骤2：校验nuxt.config.js配置 #

你已经在build的transpile中添加了drawflow，这个配置保留即可，不需要修改。

步骤3：备用方案（上述修改仍报错时使用） #

如果执行完前两步还有相同报错，可通过客户端插件全局注册drawflow：

1. 新建plugins/drawflow.client.js文件，内容如下：

import Vue from 'vue'
import Drawflow from 'drawflow/src/Drawflow'
Vue.prototype.$Drawflow = Drawflow

2. 组件中直接调用挂载到原型上的Drawflow即可：

mounted() {
  this.editor = new this.$Drawflow(this.$refs.drawflow, Vue, this)
  this.editor.start()
}

内容的提问来源于stack exchange，提问作者BATMAN_2008