Any demo app work for me

[FTamas77]

I tried to copy one of the simplest demo app, but I always have a bug. I tried a couple of things, but still have no luck.

What does this error mean?

I compared the working examples like this with my implementation but it is identical. Is it something in my environment?

I followed this link to set up

EDIT:

in the source I have a warning at this line:

import D3Network from "vue-d3-network";

And it is this:

Could not find a declaration file for module 'vue-d3-network'.
'd:/....._client/node_modules/vue-d3-network/dist/vue-d3-network.umd.js' implicitly has an 'any' type.
Try npm i --save-dev @types/vue-d3-network if it exists or add a new declaration (.d.ts) file containing declare module 'vue-d3-network';Vetur(7016)

But I don't use ts and anyway I followed that error on the internet for a quite long without any solution.

My package json:

{
  "name": "client",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "axios": "^1.6.2",
    "bootstrap": "^5.3.2",
    "vue": "^3.3.4",
    "vue-router": "^4.2.5"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.4.0",
    "vite": "^4.4.11",
    "vue-d3-network": "^0.1.28"
  }
}

And as I said, I just added these parts from tutorials:

      <div id="app">
        <d3-network :net-nodes="nodes" :net-links="links" :options="options"></d3-network>
      </div>

<script>
import D3Network from "vue-d3-network";

export default {
  data() {
    return {
      nodes: [
        { id: 1, name: "my node 1" },
        { id: 2, name: "my node 2" },
        { id: 3, _color: "orange" },
        { id: 4 },
        { id: 5 },
        { id: 6 },
        { id: 7 },
        { id: 8 },
        { id: 9 },
      ],
      links: [
        { sid: 1, tid: 2, _color: "red" },
        { sid: 2, tid: 8, _color: "f0f" },
        { sid: 3, tid: 4, _color: "rebeccapurple" },
        { sid: 4, tid: 5 },
        { sid: 5, tid: 6 },
        { sid: 7, tid: 8 },
        { sid: 5, tid: 8 },
        { sid: 3, tid: 8 },
        { sid: 7, tid: 9 },
      ],
      options: {
        force: 3000,
        nodeSize: 15,
        nodeLabels: true,
        linkWidth: 5,
      },
    };

If it is needed I can commit my code.