Only single node rendering..

[szero2one]

Describe the bug The 3D & VR versions of the library doesn't render properly with the latest version of create-react-app (v3). For example, in the 3D version, it doesn't display a network. There's only a single node showing at the center.

To Reproduce Steps to reproduce the behavior:

1. Run npx create-react-app test
2. Install npm install --save react-force-graph
3. Add a simple graph in json format
4. Render the graph data in either using e.g. ForceGraph3D.

Expected behavior The same behavior shown in the 'Directional arrows' example.

Screenshots

Desktop (please complete the following information):

• OS: Windows 10
• Browser chrome
• Version 78.0.3904.87

Additional context This is the case for both create-react-app v2 & v3...

[vasturiano]

@szero2one thanks for reaching out. Could you please try again with the latest version of the module: 1.27.2? I have updated a few dependencies that may be responsible for the culprit.

[szero2one]

@vasturiano thanks for the rapid response! Just completed another test with a clean slate. Following the reproducible steps above. The issue persists.

I did find, digging through older projects, a working package-lock.json configuration for create-react-app v2. I added it to a gist: https://gist.github.com/szero2one/8c98f4115683b55d96e5d85032e73906

[vasturiano]

@szero2one have you tried with upgrading the dependency tree to the latest react-force-graph? If you could share a link to that lockfile it would make debugging easier. In any case search in your lockfile for aframe-forcegraph-component. If you have any other version than the latest (2.21.2) that's likely where the issue resides.

[vcshih]

i was having issues with this as well, but seems like it only happens when I try to use the ForceGraph3D when importing from the package with everything included.

import { ForceGraph3D } from 'react-force-graph'; did not work but import ForceGraph3D from 'react-force-graph-3d'; did

[szero2one]

Hi again, @vasturiano . The reason why I uploaded that lockfile, was because all other configurations are crashing. Hence, the only thing you'd need to do to reproduce the issue, would be a fresh install which is provided in the reproduction steps.

@vcshih seems to have found a workaround, suggesting that the issue is in multiple dependencies. I can confirm that his workaround of using the 3D only package indeed works.

[vasturiano]

@szero2one if you're only using one mode of the library (the 3D one), it's indeed recommended to import it from the isolated package (react-force-graph-3d), to avoid any dependency conflicts.

The long story is that a-frame (one of the bundle package dependencies) is internally including a different version of three and that may override the version of three that's used by the -3d module, causing it to malfunction (it expects a more recent version: 0.109.0 or higher). Using the isolated modules removes the possibility of these type of conflicts between modules, which is related to the way your app's dependency tree is setup.

[karlicoss]

Thanks @vasturiano, isolated package solved another issue for me (and cleaned some mess).

However I still was ending up with a single node because there was an error in linkDirectionalParticleWidth (and the library seemingly stopped drawing altogether on the first error). For people with similar error, I'd recommend disabling all graph customizations (onNodeClick/onNodeHover/etc etc), to start with the very minimum configuration and gradually turn them back on to find out the offending function.