React 16 createRef crash

[neutraali]

Turns out if a component has any refs created with React 16+ the lib crashes. For example, trying to react-element-to-jsx-string the following component:

class Example extends React.Component {
	constructor(props) {
		super(props);
		this._ref = React.createRef();
	}
	render() {
		return <div ref={this._ref} />;
	}
}

... Will result in the following crash:

Uncaught RangeError: Maximum call stack size exceeded
    at Array.reduce (<anonymous>)
    at sortObject (index.js:225)
    at eval (index.js:230)
    ...

A (hopefully) temporary fix is to filter out said props, but I don't think this is ideal.

this.reactElementToJSXString(item, {
	filterProps: ['ref', 'key']
	...
});

[armandabric]

Hi @neutraali

Thanks for reporting this issue.

I have try reproduce it in our test suite but without success:

it('reproduce the issue #344', () => {
  const Example = class extends React.Component {
    constructor(props) {
      super(props);
      this._ref = React.createRef();
    }
    render() {
      return <div ref={this._ref} />;
    }
  }

  console.log(reactElementToJSXString(<Example />)); // Output: "<Example />"
})

Could you give us more detail ? Exact React version, environment, or more code to reproduce it

[neutraali]

Thanks for the speedy reply @Spy-Seth. Here's some package information:

"react": "16.4.1"
"react-dom": "16.4.1"
"react-element-to-jsx-string": "14.0.2"

We're using the following options for reactElementToJSXString (excluding filterProps, which we're using to circumvent the bug):

showDefaultProps: false,
showFunctions: true,
sortProps: false,
maxInlineAttributesLineLength: 100,
tabStop: 4

In our specific situation, we have a component that calls reactElementToJSXString to all it's children, so I'm assuming the bug doesn't manifest unless one explicitly passes the prop to the function:

const Example = class extends React.Component {
	render() {
	  return <span>Hello World</span>;
	}
}

const RendererExample = class extends React.Component {
	render() {
		let lines = React.Children.map(this.props.children, (item, i) => {
			return this.reactElementToJSXString(item);
		});
		return <div>{lines}</div>;
	}
}

const WrapperExample = class extends React.Component {
	constructor(props) {
		super(props);
		this._ref = React.createRef();
	}
	render() {
		return <RendererExample>
			<Example ref={this._ref} />
		</RendererExample>
	}
}

^ This is a close approximation to how we're encountering the issue. Here <WrapperExample> should crash when it tries to render <RendererExample>.

[armandabric]

This seems to have been fixed in #357. If the issue is still there I will reopen it