Vue-konva running into error: Must use import to load ES Module
Vue-konva running into error: Must use import to load ES Module
我正在尝试按照 documentation here 将 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.
我做了以下步骤:
- 安装
npm install vue-konva konva --save
和 npm install canvas --save
。
- 在我的
Vue
应用程序中添加了来自 documentation 的代码。
- 当我重新启动应用程序时出现错误。
我尝试了以下解决方法:
- 我正在使用
node version v14.16.0
- 我在
package.json
文件中添加了以下内容:
"ssr": false,
"type":"module",
- 删除
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>
这个应该没问题
<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>
我正在尝试按照 documentation here 将 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.
我做了以下步骤:
- 安装
npm install vue-konva konva --save
和npm install canvas --save
。 - 在我的
Vue
应用程序中添加了来自 documentation 的代码。 - 当我重新启动应用程序时出现错误。
我尝试了以下解决方法:
- 我正在使用
node version v14.16.0
- 我在
package.json
文件中添加了以下内容:
"ssr": false,
"type":"module",
- 删除
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>
这个应该没问题
<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>