Cannot use 3dForceGraph via NPM and import

[vasturiano]

Cannot use 3dForceGraph via NPM and import

[shackbarth]

It worked for me right out of the box. I'm not using create-react-app, and I'm running this component through babel and webpack. I'd recommend you try replacing

import ForceGraph3D from '3d-force-graph';

with

const ForceGraph3D = require("3d-force-graph");

to troubleshoot if it's just a problem with the way that your webpack is handling the ES6 module transpilation.

[mhebrard]

same trouble with npm import...

[fedevela]

In my case it might be related to create react app. Investigating.

…

On Tuesday, November 14, 2017, Maxime HEBRARD ***@***.***> wrote: same trouble with npm import... — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#10 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/APYA_VsPHzCak_fVLwtouMCPkGBI-k7cks5s2TaagaJpZM4QZkNp> .

[fedevela]

@shackbarth what version of npm are you using?

Thanks for the ES6 tip, will try that.

[fedevela]

I was not able to load using require nor import. I get the same error in both, something along the lines of "ForceGraph3D() is not a function". So this issue is still open.

However what I did was use a normal html script tag in which I loaded the javascript file like such:

    <script src="3d-force-graph.js"></script>

Then right below it i execute this:

window.ForceGraph3D = ForceGraph3D;

And in my react component

          <div id="3d-graph" ref="GraphDIV" className="App-3d-graph"></div>

That way i can access it from my react component:

  componentDidMount(){
    const Graph = window.ForceGraph3D()
    (this.refs.GraphDIV);

Hope that workaround helps somebody!

Cheers!

[mhebrard]

didn't succeed to use the workaround...

in my component

componentWillMount() {
    // Include 3d-force-graph by script tag
    const script = document.createElement('script');
    script.src = 'https://unpkg.com/3d-force-graph';
    script.async = false;
    document.body.appendChild(script);
}

(script.async = true do not change the behavior)
Then

componentDidMount() {
    const myGraph = window.ForceGraph3D()(document.getElementById('scene'));
}

I still have the error "ForceGraph3D is not a function"

strange thing is in the web console, i get:

>>window.ForceGraph3D
function kl</</</</e.default/<()
>>window.ForceGraph3D()
function t()

[vasturiano]

Thanks for reporting this issue. The main reason behind this error was that the file extension for the ES modules bundle (used with import) was .mjs, and the webpack config that ships with create-react-app was misinterpreting the file type due to this extension. In the just released version 1.10.2 the file extension is renamed to .module.js, so if you upgrade you shouldn't experience the issue anymore.

Also, if you wish to integrate 3d-force-graph with React may I suggest an alternative (simpler?) way using react-kapsule. The code for something similar to your example would look like:

import React from 'react';
import ForceGraph3d from '3d-force-graph';
import fromKapsule from 'react-kapsule';

const Graph = fromKapsule(ForceGraph3d);

export default () => {
  const gData = { ... };

  return <Graph 
    graphData={gData}
    cooldownTicks={300}
    cooldownTime={20000}
    autoColorBy="group"
    forceEngine="ngraph"
  />;
};

Let me know if this fixes it for you and thanks for your patience in waiting on this issue!

[fedevela]

Thank you Mr. @vasturiano will evaluate and let you know. For now I found a way to make it work with jquery but REACT is at the top of my list!!!

Thank you very much!!!!