AntV X6渲染报错: TypeError: Object(...) is not a function使用AntV

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第1天，点击查看活动详情。

使用AntV x6 渲染时,报错如下

view.js?1718:58 Uncaught TypeError: Object(...) is not a function
    at VueShapeView.renderVueComponent (webpack-internal:///./node_modules/@antv/x6-vue-shape/es/view.js:62:85)
    at eval (webpack-internal:///./node_modules/@antv/x6-vue-shape/es/view.js:29:22)
    at flushTask (webpack-internal:///./node_modules/@antv/x6/es/util/scheduler/index.js:27:38)
    at eval (webpack-internal:///./node_modules/@antv/x6/es/util/scheduler/index.js:13:69)
    at Array.forEach (<anonymous>)
    at MessagePort.cb (webpack-internal:///./node_modules/@antv/x6/es/util/scheduler/index.js:13:54)
192.168.3.113:9527/sockjs-node/info?t=1648871820330:1          Failed to load resource: net::ERR_CERT_COMMON_NAME_INVALID

前端显示效果

调试工具定位代码

isVue3? 我们不是使用的vue2 吗

isVue3哪里来的?

我们会发现,vue-demi 中的. 检索我们的项目发现只有在package-lock.json 中存在应该是 x6-vue-shape中用到的

    "@antv/x6-vue-shape": {
      "version": "1.2.10",
      "resolved": "http://qdhz.0tool.com:18081/repository/npm-group/@antv/x6-vue-shape/-/x6-vue-shape-1.2.10.tgz",
      "integrity": "sha1-7FstMEpc9GiHD6k/vz+W3fY69kA=",
      "requires": {
        "vue-demi": "^0.7.4"
      }
    },

查看 vue-demi 的详细介绍

Vue Demi (half in French) is a developing utility
allows you to write Universal Vue Libraries for Vue 2 & 3
See more details in this blog post

Extra APIs (这块跟我们看到的调代码基本一致)

Vue Demi provides extra APIs to help distinguish users' environments and to do some version-specific logic.

`isVue2` `isVue3`

import { isVue2, isVue3 } from 'vue-demi'

if (isVue2) {
  // Vue 2 only
} else {
  // Vue 3 only
}

CLI (这里详细写明了可以切换)

Manually Switch Versions

To explicitly switch the redirecting version, you can use these commands in your project's root.

npx vue-demi-switch 2
# or
npx vue-demi-switch 3

Package Aliasing

If you would like to import vue under an alias, you can use the following command

npx vue-demi-switch 2 vue2
# or
npx vue-demi-switch 3 vue3

看到这里是不是应该有答案了

没错就是 npx vue-demi-switch 2

然后运行项目效果:

AntV X6渲染报错: TypeError: Object(...) is not a function