I am using drawflow npm library in my Vuejs/Nuxtjs application but when I start the application I get the following error in my console:

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

Following are the steps I have followed as per documentation:

1. Install the drawflow using npm i drawflow --save
2. Create a drawflow.js file under plugins folder and add the code:

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

3. Modify the nuxt-config.js file and add the plugin and build:

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

  build: {
    transpile: ["drawflow"]
  },

4. My Vue Component has following in Mounted function:

  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()
    }
  }

Not understand what's wrong here. Could not find any relevant post for Nuxt. Can someone please explain what's wrong with this code?

CodePudding user response：

Even if this question could work with some more work, at the end, OP wants to have it working locally.
The solution for this use case is available here and working from my PoV.

I hence do not recommend taking the plugins path to prevent having it available on the whole SPA globally.