search

r3code / vue-vis-network

Vue 2 integration with https://github.com/visjs/vis-network/
MIT License
66 stars 14 forks source link

Constructor must be called with the new operator #5

Open bubnenkoff opened 4 years ago

bubnenkoff commented 4 years ago

When I am trying to add vis-network not in main component I am getting error: Constructor must be called with the new operator

<template>
    <el-container >
            <el-main>

                <network ref="network" :nodes="nodes" :edges="edges" :options="options"> </network>                        

                 <button @click="get_data">GetData</button>

            </el-main>
    </el-container>
</template>

<script>
    export default {
        components: { Notification },
        data () {
            return {
              nodes: [],
              edges: [],
              options: []
            }
        },

        methods:
        {
          get_data()
          {

            axios.get(base_url + '/graph')
               .then((response) => {
                this.nodes = response.data.nodes;
                this.edges = response.data.edges;
                }).catch((error) => {
                          console.log(error);
                        });  

          }

        },
    }
</script>

index.js:

import vueVisNetwork from 'vis-network'

import locale from 'element-ui/lib/locale/lang/ru-RU'
window.axios = require('axios');
Vue.use(ElementUI, { locale })
Vue.use(Router)
Vue.component('network', vueVisNetwork.Network);

window.base_url = "http://127.0.0.1:8000"

new Vue({
  el: '#app',
  locale: 'ru',
  render: h => h(App)
});
bubnenkoff commented 4 years ago

I tried:

Vue.component('network', new vueVisNetwork.Network);

But got error:

Uncaught TypeError: Cannot read property 'hasChildNodes' of undefined
r3code commented 4 years ago

Please provide vue version and dependencies you use (e.g. package.json)

bubnenkoff commented 4 years ago

Sorry i am away from PC. Could you look my vue template in my github. I use it as base. And if I right remember did not update it.

I tried add vis not as root element, as I described before.

сб, 22 февр. 2020 г. в 23:00, Dmitriy S. Sinyavskiy < notifications@github.com>:

Please provide vue version and dependencies you use (e.g. package.json)

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/r3code/vue-vis-network/issues/5?email_source=notifications&email_token=ABRWNFTOBAGEZFVXD3PEVEDREF76ZA5CNFSM4KXXU72KYY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOEMVJH2A#issuecomment-589992936, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABRWNFXWYSMWFZHWP54CN2TREF76ZANCNFSM4KXXU72A .

r3code commented 4 years ago

import vueVisNetwork from 'vis-network'

hmm... why import of vueVisNetwork is from vis-network? It should be vue-vis-network

meirtin commented 4 years ago

@bubnenkoff this solve this problem import { Network } from "vue-vis-network"; Vue.component("network", Network);

bubnenkoff commented 4 years ago

Do you sure that I can use it with Parcel? After import I am getting error:

> vis-data@6.5.0 postinstall D:\code\2018\zakupki-downloader\site\html\node_modules\vis-data
> opencollective postinstall || exit 0

‼  Could not load existing sourcemap of "../node_modules/vue-vis-network/dist/vueVisNetwork.common.j                                                                                s".
‼  Could not load existing sourcemap of "../node_modules/vue-vis-network/dist/vueVisNetwork.common.j                                                                                s".
'opencollective' is not recognized as an internal or external command,
operable program or batch file.
'opencollective' is not recognized as an internal or external command,
operable program or batch file.

> vis-network@5.4.1 postinstall D:\code\2018\zakupki-downloader\site\html\node_modules\vis-network
> opencollective postinstall || exit 0

‼  Could not load existing sourcemap of "../node_modules/vue-vis-network/dist/vueVisNetwork.common.j                                                                                s".
npm WARN vis-data@6.5.0 requires a peer of vis-util@^2.1.0 but none is installed. You must install p                                                                                eer dependencies yourself.
npm WARN parcel-starter@0.0.1 No repository field.
npm WARN parcel-starter@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os"                                                                                :"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vue-vis-network@1.0.2
added 8 packages from 64 contributors and audited 13208 packages in 20.372s
found 0 vulnerabilities

‼  Could not load existing sourcemap of "../node_modules/vue-vis-network/dist/vueVisNetwork.common.j                                                                                s".
npm WARN vis-data@6.5.0 requires a peer of vis-util@^2.1.0 but none is installed. You must install p                                                                                eer dependencies yourself.
npm WARN parcel-starter@0.0.1 No repository field.
npm WARN parcel-starter@0.0.1 No license field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.11 (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.11: wanted {"os"                                                                                :"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ vue@2.6.11
updated 1 package and audited 13208 packages in 5.141s
found 0 vulnerabilities

√  Built in 31.89s.
×  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:654:54)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.bundle (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundler\src\Bun                                                                                dler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
×  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:654:54)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.bundle (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundler\src\Bun                                                                                dler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
×  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:654:54)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.bundle (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundler\src\Bun                                                                                dler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
×  Cannot read property 'type' of undefined
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:654:54)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.createBundleTree (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundl                                                                                er\src\Bundler.js:721:12)
    at Bundler.bundle (D:\code\2018\zakupki-downloader\site\html\node_modules\parcel-bundler\src\Bun                                                                                dler.js:298:14)
    at processTicksAndRejections (internal/process/task_queues.js:89:5)
bubnenkoff commented 4 years ago

To break all project enough to add one line:

import { Network } from "vue-vis-network";

изображение

r3code commented 4 years ago

Vue.component('network', new vueVisNetwork.Network);

This should be 

import { Network } from "vue-vis-network";
Vue.component('network', Network);

I've updated the Readme in master

bubnenkoff commented 3 years ago

Do not work. I checked right now and got error:

vueVisNetwork.common.js:1175 Uncaught SyntaxError: Unexpected token '*'
    at Object../node_modules/vis-network/dist/vis-network.esm.min.js (vueVisNetwork.common.js:1175)
    at __webpack_require__ (vueVisNetwork.common.js:21)
    at eval (main.js:2)
    at Module../src/main.js (vueVisNetwork.common.js:1270)
    at __webpack_require__ (vueVisNetwork.common.js:21)
    at eval (entry-lib-no-default.js:3)
    at Module../node_modules/@vue/cli-service/lib/commands/build/entry-lib-no-default.js (vueVisNetwork.common.js:98)
    at __webpack_require__ (vueVisNetwork.common.js:21)
    at vueVisNetwork.common.js:85
    at Object.parcelRequire.../node_modules/vue-vis-network/dist/vueVisNetwork.common.js (vueVisNetwork.common.js:88)