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

的情况下被调用

关注

发信

关注(28)粉丝(399)

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

本文介绍了Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

类构造函数 i 不能在没有 'new' 的情况下被调用

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

使用 npm i drawflow --save

drawflow

Vue 组件，代码如下:

<div class="container-fluid"><div class="row"><div class="col-sm-12"><h1>绘制流程</h1><div id="drawflow";ref="drawflow"/>

<脚本>从'vue'导入Vue从'drawflow'导入DrawflowVue.use(Drawflow)导出默认{name: '应用程序',数据 () {返回 {}},挂载(){const id = document.getElementById('drawflow')控制台日志(ID)this.editor = new Drawflow(id, Vue, this)this.editor.start()},方法: {}}<风格>@import 'drawflow/dist/drawflow.min.css';</风格>

我的nuxt.config.js文件:

导出默认{//全局页头:https://go.nuxtjs.dev/config-head头: {title: "应用 | 生成器",html属性:{朗:恩"},元:[{字符集:utf-8"}，{ name: "viewport", content: "width=device-width, initial-scale=1" },{隐藏:描述"，名称:描述"，内容:"}，{名称:格式检测"，内容:电话=否"}],脚本: []，关联: [{ rel: "icon", type: "image/x-icon", href: "/Logo.ico" },{rel: "样式表",href: "https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css"},{rel: "样式表",href: "https://unpkg.com/[email protected]/dist/vue-multiselect.min.css"}]},//全局 CSS:https://go.nuxtjs.dev/config-csscss: ["@/assets/css/styles.css"],//在渲染页面之前运行的插件:https://go.nuxtjs.dev/config-plugins插件: [{ 源代码:~/插件/总线"，模式:客户端"}],//自动导入组件:https://go.nuxtjs.dev/config-components成分:真实，//用于开发和构建的模块(推荐):https://go.nuxtjs.dev/config-modules构建模块:[//https://go.nuxtjs.dev/eslint["@nuxtjs/eslint-module",{修复:正确}],["@nuxtjs/dotenv"]],//模块:https://go.nuxtjs.dev/config-modules模块: ["@nuxtjs/axios", "bootstrap-vue/nuxt"],//axios 模块配置:https://go.nuxtjs.dev/config-axios轴:{baseURL: process.env.API_URL,标题:{内容类型":文本/纯文本"}},//构建配置:https://go.nuxtjs.dev/config-build建造: {转译:[drawflow"]},服务器: {端口:5000},视图:{配置:{生产提示:假，开发工具:真的}}};

以下是我的.eslintrc.js:

module.exports = {根:真的，环境:{浏览器:是的，节点:真},解析器选项:{解析器:'@babel/eslint-parser',要求配置文件:假},扩展:['@nuxtjs','插件:nuxt/推荐'],插件: [],//在此处添加您的自定义规则规则:{}}

解决方案

我已经在相关的 Github issue 如果你想看一看.
同时，这也是答案.

您需要不要忘记按照本节中的说明进行转译.

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

<div class="container-fluid"><div class="row"><div class="col-sm-12"><h1>绘制流程</h1><div id="drawflow-graph";ref="drawflow"/>

<脚本>从'vue'导入Vue导出默认{数据() {返回 {{}，}},异步挂载(){constimportedModule = await import('drawflow')const Drawflow =importedModule.defaultthis.editor = new Drawflow(this.$refs.drawflow, Vue, this)this.editor.start()this.editor.addNode('github',0,1、150,300,'github','名称'，'酷 Vue 示例')},}<风格>@import 'drawflow/dist/drawflow.min.css';#drawflow-graph {宽度:800px；高度:800px；边框:2px 实心青色；}</风格>

在我这边工作得很好

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

Class constructor i cannot be invoked without 'new'

Following are the steps I have followed as per documentation:

Install the drawflow using npm i drawflow --save
Vue Component with following code:

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

My nuxt.config.js file:

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/[email protected]/font/bootstrap-icons.css"
      },
      {
        rel: "stylesheet",
        href: "https://unpkg.com/[email protected]/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
    }
  }
};

Following is my .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: {}
}

解决方案

I've answered in the related Github issue if you want to give it a look.
Meanwhile, here is the answer too.

You need to not forget to transpile as told in this section.

Then, this kind of code should make the whole thing work

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

Working perfectly fine on my side

这篇关于Nuxt 抛出:类构造函数 i 不能在没有“new"的情况下被调用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！

08-05 10:48