React-d3 findComponentRoot(…, .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): Unable to find element

Question

I try to use react with react-d3 but I'm getting error all the time, at first time, I have use react v16 but it request React v0.14.9 .
So now I can see the Chart before error appears.
I have used this tuto from react d3 .

After setting it there that error:

findComponentRoot(..., .0.0.1.0.0.1.0.$/=13.0.$faux-dom-0): Unable to find element. This probably means the DOM was unexpectedly mutated (e.g., by the browser), usually due to forgetting a <tbody> when using tables, nesting tags like <form>, <p>, or <a>, or using non-SVG elements in an <svg> parent. Try inspecting the child nodes of the element with React ID ''.

It sound like I have a table but not, App.js look like:

import React, { Component } from 'react';
import './App.css';
import {Chart} from 'react-d3-core';
import {LineChart} from 'react-d3-basic';

class App extends Component {

  render() {
    var chartData = [
        {data: 2000}
    ]
    var width = 700,
    height = 300,
    margins = {left: 100, right: 100, top: 50, bottom: 50},
    title = "User sample",
    // chart series,
    // field: is what field your data want to be selected
    // name: the name of the field that display in legend
    // color: what color is the line
    chartSeries = [
      {
        field: 'BMI',
        name: 'BMI',
        color: '#ff7f0e'
      }
    ],
    // your x accessor
    x = function(d) {
      return d.index;
    }

    return (
      <div className="App">
            <Chart
              title={title}
              width={width}
              height={height}
              margins= {margins}
              >
              <LineChart
                showXGrid= {false}
                showYGrid= {false}
                margins= {margins}
                title={title}
                data={chartData}
                width={width}
                height={height}
                chartSeries={chartSeries}
                x={x}
              />
            </Chart>
      </div>
    );
  }
}

export default App;

---

package.json

 { "name": "reactd3", "version": "0.1.0", "private": true, "dependencies": { "ajv": "^6.5.2", "babel-loader": "^7.1.5", "html-webpack-plugin": "^3.2.0", "react": "^0.14.9", "react-d3": "^0.4.0", "react-d3-basic": "^1.6.11", "react-dom": "^0.14.9", "react-scripts": "1.1.4", "style-loader": "^0.21.0", "webpack": "^4.16.2" }, "scripts": { "start": "react-scripts start", "build": "react-scripts build", "test": "react-scripts test --env=jsdom", "eject": "react-scripts eject" }, "devDependencies": { "webpack-cli": "^3.1.0" } } 

There is no reason to have that error because Chart doesn't have table form.

I've try to use before it with react16 but with no success, many errors...

Edit: Now we use d3.js instead of react-d3 and it works but that's better if anyone have that problem to solve it.

Answer 1

IMHO this error isn't related to entire app root ('root' in html) but one of subcomponents.

In earlier versions of react rendered DOM nodes were identified by additional html property 'data-reactid' with values related to virtual node paths. '.0.0.1.0.0.1.0...' is an example of this.

This errors means that react has this node in virtual tree, wants to update it in DOM but for some reason DOM node (rendered earlier with this id) dissapeared. Maybe browser 'corrected' bad html structure? This can be related to any html error, table was shown as example reason.

Any reason to not switch from not maintained 'react-d3' into 'react-d3-components'?