Graph is loading fine, but gives console error

[hemant-info2016]

Describe the bug I have used the exact same sample which is mentioned here (with same graph data): https://www.npmjs.com/package/react-d3-graph#usage-sample

And graph loads perfectly fine, but it shows error in console in Chrome browser: react-dom.development.js:2320 Error: attribute d: Expected number, "MNaN,NaNA0,0 0 0,…"

Following are the current package version: "d3": "^5.16.0", "react": "16.12.0", "react-d3-graph": "^2.5.0", "react-dom": "16.12.0",

Note: I have installed d3 first and then react-d3-graph as suggested. Please help!!

[Jshaider]

same issue with me. Please help..

[Jshaider]

react-dom.development.js:1297 Error: attribute d: Expected number, "MNaN,NaNA0,0 0 0,…".

[Vpicc]

I'm having the same issue

[technicalta]

I'm also having this issue.

[danielcaldas]

I'll need more information from all of you if possible. I'm not currently able to replicate this issue. Could you please follow the bug report template and provide all the information there in this same issue? Thanks

Also if possible a link to a repo or code sandbox with the error.

Another question. Is this only about a JavaScript error that you see in the console, or is it breaking your applications?

@technicalta @Jshaider @Vpicc @hemant-info2016

[michaelbdavid]

I'm also seeing this issue as well.

To Reproduce Steps to reproduce the behavior:

Happens on initial load of graph.
Seeing the follow error x14 which matches the number of nodes loaded within my graph:

react-dom.development.js:1297 Error: <path> attribute d: Expected number, "MNaN,NaNA0,0 0 0,…".
setValueForProperty @ react-dom.development.js:1297
setInitialDOMProperties @ react-dom.development.js:5831
setInitialProperties @ react-dom.development.js:6026
finalizeInitialChildren @ react-dom.development.js:7499
completeWork @ react-dom.development.js:18978
completeUnitOfWork @ react-dom.development.js:22192
performUnitOfWork @ react-dom.development.js:22165
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
scheduleUpdateOnFiber @ react-dom.development.js:21199
enqueueSetState @ react-dom.development.js:12639
push.../../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:471
(anonymous) @ Graph.js:302
call @ dispatch.js:57
step @ simulation.js:32
timerFlush @ timer.js:61
wake @ timer.js:71
requestAnimationFrame (async)
sleep @ timer.js:108
restart @ timer.js:39
timer @ timer.js:52
(anonymous) @ simulation.js:17
_createForceSimulation @ graph.helper.js:52
initializeGraphState @ graph.helper.js:425
Graph @ Graph.js:472
constructClassInstance @ react-dom.development.js:12880
updateClassComponent @ react-dom.development.js:17100
beginWork @ react-dom.development.js:18620
beginWork$1 @ react-dom.development.js:23179
performUnitOfWork @ react-dom.development.js:22154
workLoopSync @ react-dom.development.js:22130
performSyncWorkOnRoot @ react-dom.development.js:21756
(anonymous) @ react-dom.development.js:11089
unstable_runWithPriority @ scheduler.development.js:653
runWithPriority$1 @ react-dom.development.js:11039
flushSyncCallbackQueueImpl @ react-dom.development.js:11084
flushSyncCallbackQueue @ react-dom.development.js:11072
discreteUpdates$1 @ react-dom.development.js:21893
discreteUpdates @ react-dom.development.js:806
dispatchDiscreteEvent @ react-dom.development.js:4168

Environment:

OS: centos7 Browser: Chrome Version: 84.0.4147.89 (Official Build) (64-bit) Node version [v10.18.1] "react-d3-graph": "^2.5.0", "react-dom": "^16.13.1", "@types/react": "^16.9.0", "@types/react-d3-graph": "^2.3.3", "@types/react-dom": "^16.9.0", "d3-drag": "^1.2.5", "d3-force": "^2.0.1", "d3-shape": "^1.3.7", "d3-zoom": "^1.8.3",

[danielcaldas]

Hey @michaelbdavid, I might be close to finding the issue but would need a few more details.

Are you setting values for any of the following in you configuration?

• config.link.markerWidth
• config.link.markerHeight
• config.node.size

If yes may I get your current react-d3-graph configuration values? Additionally, if you could link a repo where I can reproduce this issue would be of great help since I'm not able to reproduce it myself.

Same for @technicalta @Jshaider and others, if possible.

[Tom-Davidson]

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

[Jshaider]

Hello @danielcaldas, the error is just in console, it's not breaking the application. I have set config.node.size. nothing else.

[Jshaider]

@danielcaldas these are my graph configurations `const myConfig = {

        height: (window.screen.height > 700 ? (window.screen.height/2) + 70 : window.screen.height - 200),
        width:window.screen.width -250,
        nodeHighlightBehavior: true,
        automaticRearrangeAfterDropNode: true,
        node: {
            fontSize : 15,
            fontWeight:600,
            highlightStrokeColor: "blue",
            labelProperty: "name"
        },
        link: {
            highlightColor: "lightblue",
            color:"#2bcbba"
        },
    };`

[Jshaider]

when I click on generate the graph, first it shows errors, and then the graph is successfully generated.

I am actually new to programming, that is all I can do to help you.. if you need any further information.. please let me know. I will be happy to help you..

[danielcaldas]

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

This might actually be possible, may I check whether you have react devtools installed? I have them installed and I'm still not able to see the error.

I think we're lacking some input validation here, whereby non-numerical values for config.link.markerWidth or config.link.markerHeight or config.node.size are provided and we're not parsing them.

Is that the case, I can't see the value of your config.node.size, are you providing a string or a number as input?

If this is the case the culprit Pull Request might this feature https://github.com/danielcaldas/react-d3-graph/pull/271 introduced in react-d3-graph@2.5.0.

Hey @Jshaider may I ask you to downgrade react-d3-graph to version 2.4.1 and verify if you're still facing the same issue? Thanks!

[terahn]

An easy way I've found to reproduce this in the sandbox is to press the add node button repeatedly. It's really puzzling though, since the error will only pop up every once in a while.

[Alex-Mason-1982]

I was having the same issue and i can confirm that downgrading to react-d3-graph to version 2.4.1 has solved it.

Do you have the react devtools extension installed? My guess is that it's trying to parse the contents of the path's "d" and not understanding it. I have the same in mine. I had config.node.size set but get the same without it.

This might actually be possible, may I check whether you have react devtools installed? I have them installed and I'm still not able to see the error.

I think we're lacking some input validation here, whereby non-numerical values for config.link.markerWidth or config.link.markerHeight or config.node.size are provided and we're not parsing them.

Is that the case, I can't see the value of your config.node.size, are you providing a string or a number as input?

If this is the case the culprit Pull Request might this feature #271 introduced in react-d3-graph@2.5.0.

Hey @Jshaider may I ask you to downgrade react-d3-graph to version 2.4.1 and verify if you're still facing the same issue? Thanks!

[danielcaldas]

Thanks, this is really helpful @Alex-Mason-1982, will add some guards in place in the new calculations that we shipped in the last version in an attempt to this issue.

And thanks @terahn I was actually able to reproduce the same error now by quickly adding nodes in the sandbox.

[danielcaldas]

I might have found the edge case on [the new calculations](in the new calculations that we shipped), I'll ship a fix and I'll come back to you later to verify if we're still facing the issue.

At some point, we might have division by 0, this is not safeguard.

[fedecastelli]

@danielcaldas I noticed this bug has been fixed but the update has not been released (since the latest release version is 2.5.0 and it has been released on Jul 3). Do you plan to release a new version soon? I really love this package but I can't use it with that bug inside.

[70nyIT]

hi guys same issue of @fedecastelli here. is there a workaround? I tried to git clone the project and run npm run dist but it throws errors on building while running tests. Are you planning to release a new version soon? Thanks ahead for your efforts!

[antoninklopp]

Hi @70nyIT , You should be able to use the master branch in your project if you need it before a new version gets released on npm, please see this comment

[70nyIT]

@antoninklopp that's what I was doing. After your suggestion I implemented craco , so that I can transpile the code. The above mentioned error is not showing out anymore.

For anyone that might be interested, if you're using create-react-app and you don't want to eject:

• run npm install @craco/craco --save-dev
• run npm install craco-babel-loader --save-dev
• create craco.config.js in the root folder of the project
• update the scripts in package.json:
  • react-scripts start -> craco start
  • react-scripts build -> craco build
  • ...
• this is the content of the configuration craco file

const path = require('path')
const fs = require('fs')
const cracoBabelLoader = require('craco-babel-loader')

// manage relative paths to packages
const appDirectory = fs.realpathSync(process.cwd())
const resolvePackage = relativePath => path.resolve(appDirectory, relativePath)

module.exports = {
  plugins: [
    {
      plugin: cracoBabelLoader,
      options: {
        includes: [
          resolvePackage('node_modules/react-d3-graph'),
        ],
      },
    },
  ],
}

[shaliniBITC]

I face same issue when integrate d3-graph into my react application, If you find any solution than plz let me know.

[danielcaldas]

Hey, @shaliniBITC release incoming very soon. Hopefully the fix we're shipping addressed this issue.

[thexeromin]

I am also having the same issue