Issue with react-sizeme and react-faux-dom

[Ribesg]

First, thanks for this awesome library!

Issue

This works: https://codesandbox.io/embed/2ovl7qpz1n This doesn't work: https://codesandbox.io/embed/0318mwk53p

The only difference is on line 26. I don't think I understand the error, but maybe there is something the fake DOM of react-faux-dom doesn't implement?

References

Error:

TypeError: Cannot read property '_erd' of undefined
in Object.getState
in attachListenerToElement
in utils.forEach

Working code:

import React from "react";
import { render } from "react-dom";
import * as d3 from "d3";
import sizeMe from "react-sizeme";
import { withFauxDOM } from "react-faux-dom";

class App extends React.PureComponent {

  static defaultProps = {
    chart: "loading"
  };

  componentDidMount() {
    const faux = this.props.connectFauxDOM("svg", "chart");
    const { width, height } = this.props.size;
    d3
      .select(faux)
        .attr("viewBox", `0 0 ${width} ${height}`)
        .append("rect")
          .attr("width", "100%")
          .attr("height", "100%")
          .attr("fill", "red")
  }

  render() {
    return <div>{this.props["chart"]}</div>;
  }

}

const ResponsiveWithFauxDOMApp = sizeMe({ monitorHeight: true })(withFauxDOM(App));

const FixedDiv = () => (
  <div style={{ width: "400px", height: "300px" }}>
    <ResponsiveWithFauxDOMApp />
  </div>
);

render(<FixedDiv />, document.getElementById("root"));

Non-working code:

import React from "react";
import { render } from "react-dom";
import * as d3 from "d3";
import sizeMe from "react-sizeme";
import { withFauxDOM } from "react-faux-dom";

class App extends React.PureComponent {

  static defaultProps = {
    chart: "loading"
  };

  componentDidMount() {
    const faux = this.props.connectFauxDOM("svg", "chart");
    const { width, height } = this.props.size;
    d3
      .select(faux)
        .attr("viewBox", `0 0 ${width} ${height}`)
        .append("rect")
          .attr("width", "100%")
          .attr("height", "100%")
          .attr("fill", "red")
  }

  render() {
    return this.props["chart"];
  }

}

const ResponsiveWithFauxDOMApp = sizeMe({ monitorHeight: true })(withFauxDOM(App));

const FixedDiv = () => (
  <div style={{ width: "400px", height: "300px" }}>
    <ResponsiveWithFauxDOMApp />
  </div>
);

render(<FixedDiv />, document.getElementById("root"));

[Ribesg]

This may either be linked to this issue https://github.com/ctrlplusb/react-sizeme/issues/98 or maybe react-sizeme does not support svg as a root element.

As far as I know, the faux DOM element doesn't change... Right?

[Ribesg]

In fact this is a non-problem because of this https://github.com/ctrlplusb/react-sizeme/issues/128 I missed the fact that react-sizeme REQUIRES your component to render a "free" root, so the non-working code provided here will never work with react-sizeme anyway.