How to fix `React DevTools encountered an error: RangeError: Invalid array length`
I recently found this rather obscure message in my dev tools console when working on a React + Gatsby based website. It took a bit of digging to figure out where it was coming from since the stack trace was all React internals.
Turns out I had made a simple mistake some weeks prior when setting the display name on a component that was being wrapped with
forwardRef: I had passed in the component itself as the value of the
displayName property instead of a string.
const Something = React.forwardRef((props, ref) => <div>…</div>) -Something.displayName = Something +Something.displayName = "Something"
Turns out React DevTools isn’t so fond of that.
Hopefully this will save someone (probably me) time in the future!