Nuxt 抛出：没有“new”就无法调用类构造函数

Posted 2023-02-16

【中文标题】Nuxt 抛出：没有“new”就无法调用类构造函数

【英文标题】：Nuxt throws: Class constructor i cannot be invoked without 'new'

【发布时间】：2021-12-23 05:04:10

【问题描述】：

我在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: 

【问题讨论】：

jsconfig 用于 VS Code。它不会影响应用程序的工作方式。当您将 es5 目标用于不应该与它一起使用的库时，通常会发生该错误。

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

为初学者发布 nuxt 和 babel 配置。 jsconfig 无关紧要。

@EstusFlask 谢谢。我添加了nuxt.config.js 文件内容。但是，我找不到babel config 文件。似乎它不在我的项目中。请告诉我在哪里可以找到它，我会发布它。

顺便说一句，不要使用@nuxtjs/dotenv，正如我在我的previous answers 之一中所解释的那样，它也已被弃用。

【参考方案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>

在我这边工作得很好