dash14 / v-network-graph

An interactive network graph visualization component for Vue 3
https://dash14.github.io/v-network-graph/
MIT License
495 stars 44 forks source link

`v-network-graph/force-layout` dependency not found #32

Closed RainBoltz closed 2 years ago

RainBoltz commented 2 years ago

Hi, really appreciate your amazing work!

I'm using Vue3 with Typescript and I can't reproduce this example about d3-force.

anyway, VSCode didn't show any error after importing v-network-graph/force-layout (the interface is reachable I guess), but the compilation failed when I run npm run serve.

here's the full error message:

 ERROR  Failed to compile with 1 error

This dependency was not found:

* v-network-graph/force-layout in ./node_modules/cache-loader/dist/cjs.js??ref--15-0!./node_modules/babel-loader/lib!./node_modules/ts-loader??ref--15-2!./node_modules/cache-loader/dist/cjs.js??ref--1-0!./node_modules/vue-loader-v16/dist??ref--1-1!./src/components/DiagramContainer.vue?vue&type=script&lang=ts

To install it, you can run: npm install --save v-network-graph/force-layout

thanks for reviewing this problem!

dash14 commented 2 years ago

Hi @RainBoltz,

Thanks for your report. In the package.json of v-network-graph, the specification scheme "Subpath exports" is used. This does not seem to work well in some environments.

In the future, I may revise this way of specifying, but for now, please try the following:

import { ForceLayout } from "v-network-graph/lib/force-layout.es"

Best regards,

RainBoltz commented 2 years ago

Hi @dash14,

Thanks for the fast reply!

When I use the code:

import { ForceLayout } from "v-network-graph/lib/force-layout.es"

here comes another error:

Cannot find module 'v-network-graph/lib/force-layout.es' or its corresponding type declarations.ts(2307)

(I'm using Node14 + npm6 on MacBook)

can you provide any environment setting that can run the example successfully? that would be helpful!

dash14 commented 2 years ago

Hi @RainBoltz,

Sorry for the late reply. I was using Vite myself and had no problems, so I was not aware of the seriousness of this issue. I created a new environment with vue-cli and was able to reproduce the error you reported, even with an alternative import statement. Then, I have fundamentally reworked the configuration for importing, so please check using the new version. (v0.3.15)

Please import force-layout as follows:

import { ForceLayout } from "v-network-graph/lib/force-layout"
RainBoltz commented 2 years ago

Hi @dash14 , Thx for the hotfix, really appreciate that! 💯 (btw @RainBoltz is not my twitter account lol)