时间戳

首页 > 解决方案 > Vue-konva 遇到错误：必须使用 import 来加载 ES 模块

javascript - Vue-konva 遇到错误：必须使用 import 来加载 ES 模块

问题描述

我正在尝试按照此处的文档Vue-konva将其实现到我的应用程序中。但是我遇到了以下错误：

Must use import to load ES Module: /Users/myName/projects/projectName/node_modules/konva/lib/index-node.js require() of ES modules is not supported. 
require() of /Users/myName/projects/projectName/node_modules/konva/lib/index-node.js from /Users/myName/projects/projectName/node_modules/vue-konva/umd/vue-konva.js is an ES module file as it is a .js file whose nearest parent package.json 
contains "type": "module" which defines all .js files in that package scope as ES modules. Instead rename index-node.js to end in .cjs, change the requiring code to use import(), or remove "type": "module" from /Users/myName/projects/projectName/node_modules/konva/package.json.

我做了以下步骤：

  1. 安装npm install vue-konva konva --save和npm install canvas --save.
  2. Vue从文档中添加了我的应用程序中的代码。
  3. 当我重新启动应用程序时，我得到了错误。

以下是我尝试解决的问题：

  1. 我在用node version v14.16.0
  2. 我在我的package.json文件中添加了以下内容：
"ssr": false,
"type":"module",
  1. 删除node-modules文件夹并使用 重新创建npm-install。

我觉得我正在做文档中提到的所有事情，但仍然不确定为什么会出现错误。有人可以帮我解决这个问题吗？

以下是应用程序的完整代码：

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle" />
    </v-layer>
  </v-stage>
</template>

<script>
import Vue from 'vue'
import VueKonva from 'vue-konva'

Vue.use(VueKonva)

export default {
  data () {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      }
    }
  }
}
</script>

<style>
body {
  margin: 0;
  padding: 0;
}
</style>

**已更新** 我试着喜欢这个并得到了错误，client.js:227 TypeError: Vue.use is not a function

<template>
  <v-stage :config="configKonva">
    <v-layer>
      <v-circle :config="configCircle" />
    </v-layer>
  </v-stage>
</template>

<script>
export default {
  data () {
    return {
      configKonva: {
        width: 200,
        height: 200
      },
      configCircle: {
        x: 100,
        y: 100,
        radius: 70,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 4
      }
    }
  },
  async mounted () {
    if (process.browser) {
      const Vue = await import('vue')
      const VueKonva = await import("vue-konva")
      Vue.use(VueKonva)
      console.log('HELLO FROM MOUNTED')
    }
  }
}
</script>

标签： javascriptnode.jsvue.jsnuxt.jskonvajs

解决方案

这个应该可以正常工作

<script>
import Vue from 'vue'

export default {
  async mounted () {
    if (process.browser) {
      const VueKonva = await import('vue-konva')
      Vue.use(VueKonva)
      console.log('HELLO FROM MOUNTED')
    }
  }
}
</script>

推荐阅读