maker.js: Not working with vue.js

Managed(?) to install it for vue cli project but get an error trying to generate svg and use it When I log the makerjs object I get: {version: "0.10.3", environmentTypes: {…}, environment: "browser", unitType: {…}, splitDecimal: ƒ, …} What I did so far: 1. npm install makerjs --save 2. In main.js:

import makerjs from 'makerjs'
global.makerjs=makerjs;
  1. In a component, in one of the computed functions:
var circle = {
            type: 'circle',
            origin: [0, 0],
            radius: 50
           };
var svg = makerjs.exporter.toSVG(circle);
console.log(svg);

4 Get the following error:

vue.esm.js?efeb:591 [Vue warn]: Error in render: "TypeError: kdbush is not a function"

found in

---> <Rectangle> at src\components\Rectangle.vue
       <App> at src\App.vue
         <Root>
warn @ vue.esm.js?efeb:591
logError @ vue.esm.js?efeb:1737
globalHandleError @ vue.esm.js?efeb:1732
handleError @ vue.esm.js?efeb:1721
Vue._render @ vue.esm.js?efeb:4546
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
Watcher @ vue.esm.js?efeb:3131
mountComponent @ vue.esm.js?efeb:2795
Vue.$mount @ vue.esm.js?efeb:8540
Vue.$mount @ vue.esm.js?efeb:10939
init @ vue.esm.js?efeb:4137
createComponent @ vue.esm.js?efeb:5608
createElm @ vue.esm.js?efeb:5555
updateChildren @ vue.esm.js?efeb:5845
patchVnode @ vue.esm.js?efeb:5936
patch @ vue.esm.js?efeb:6096
Vue._update @ vue.esm.js?efeb:2670
updateComponent @ vue.esm.js?efeb:2788
get @ vue.esm.js?efeb:3142
run @ vue.esm.js?efeb:3219
flushSchedulerQueue @ vue.esm.js?efeb:2981
(anonymous) @ vue.esm.js?efeb:1837
flushCallbacks @ vue.esm.js?efeb:1758
Promise.then (async)
microTimerFunc @ vue.esm.js?efeb:1806
nextTick @ vue.esm.js?efeb:1850
queueWatcher @ vue.esm.js?efeb:3068
update @ vue.esm.js?efeb:3209
Vue.$forceUpdate @ vue.esm.js?efeb:2691
(anonymous) @ index.js?737e:233
(anonymous) @ index.js?737e:231
(anonymous) @ index.js?737e:116
(anonymous) @ Rectangle.vue?99d4:39
(anonymous) @ Rectangle.vue?99d4:44
(anonymous) @ build.js:1029
__webpack_require__ @ build.js:679
hotApply @ build.js:608
(anonymous) @ build.js:290
Promise.then (async)
hotUpdateDownloaded @ build.js:289
hotAddUpdateChunk @ build.js:266
webpackHotUpdateCallback @ build.js:8
(anonymous) @ 0.450991b3595aa743ceee.hot-update.js:1
vue.esm.js?efeb:1741 TypeError: kdbush is not a function
    at PointGraph.mergeNearestSinglePoints (index.js?196a:2827)
    at _loop_2 (index.js?196a:5788)
    at Object.findChains (index.js?196a:5817)
    at getPathDataByLayer (index.js?196a:6956)
    at Object.toSVG (index.js?196a:7193)
    at VueComponent.drawProject (Rectangle.vue?d21f:212)
    at VueComponent.area (Rectangle.vue?d21f:160)
    at Watcher.get (vue.esm.js?efeb:3142)
    at Watcher.evaluate (vue.esm.js?efeb:3249)
    at VueComponent.computedGetter [as area] (vue.esm.js?efeb:3507)

About this issue

  • Original URL
  • State: closed
  • Created 6 years ago
  • Comments: 15 (6 by maintainers)

Most upvoted comments

Yup, that fixed it. Thanks!