集成Vue-konva报Must use import to load ES Module错误求助

问题根因 #

1. 第一个ES模块导入报错：最新版konva（v9及以上）已全面改为纯ES模块包，不支持CommonJS的require()语法加载，而你引入的vue-konva/umd/vue-konva.js是CommonJS规范的打包产物，内部用require()加载konva就会触发兼容性报错。
2. 第二个Vue.use is not a function报错：
   • 动态import('vue')拿到的是模块对象，不是直接可用的Vue构造函数/实例，Vue2需要取.default属性才能拿到正确的Vue对象；
   • 全局插件注册不能写在组件的mounted生命周期中，此时组件已经完成模板解析，v-stage等自定义组件还未注册，就算注册成功也不会生效。

解决方案 #

步骤1：降级konva到兼容CommonJS的版本 #

直接安装konva 8.x稳定版，该版本同时支持ES模块和CommonJS加载，从根源解决导入冲突：

npm install konva@8.x --save

不要修改项目package.json的"type": "module"配置，该配置会强制你项目所有.js文件按ES模块解析，反而会和多数前端构建工具的默认CommonJS规则冲突，引发更多报错。

步骤2：正确注册VueKonva插件 #

不要在组件内部注册全局插件，根据你的项目类型选择对应注册方式：

普通Vue2项目

在入口文件main.js中全局注册：

import Vue from 'vue'
import VueKonva from 'vue-konva'
// 全局注册插件，所有组件都可以直接用v-stage等标签
Vue.use(VueKonva)

new Vue({
  render: h => h(App)
}).$mount('#app')

组件代码直接保留模板和逻辑即可，不需要再导入Vue和VueKonva。

普通Vue3项目

Vue3取消了全局Vue.use方法，需要在应用实例上注册：

import { createApp } from 'vue'
import App from './App.vue'
import VueKonva from 'vue-konva'

const app = createApp(App)
app.use(VueKonva)
app.mount('#app')

Nuxt2等SSR环境

你代码中用到了process.browser判断，大概率是Nuxt项目，按以下配置处理：

1. 修改nuxt.config.js，添加transpile和插件配置：

export default {
  build: {
    // 让webpack转译konva和vue-konva避免SSR加载报错
    transpile: ['vue-konva', 'konva']
  },
  plugins: [
    // 只在客户端加载vue-konva插件
    { src: '~/plugins/vue-konva.js', ssr: false }
  ]
}

2. 新建plugins/vue-konva.js文件：

import Vue from 'vue'
import VueKonva from 'vue-konva'
Vue.use(VueKonva)

步骤3：重新安装依赖 #

删除项目根目录的node_modules文件夹和package-lock.json/yarn.lock文件，重新执行npm install安装依赖后启动项目即可。

内容的提问来源于stack exchange，提问作者BATMAN_2008