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!

 
29
Kudos
 
29
Kudos

Now read this

A few terminal shortcuts for Rails devs

Here are a few command-line shortcuts for anybody that uses Ruby or Ruby on Rails on a daily basis: Abbreviate bundle exec [command] # Replace bundle exec with just be and you no longer have an excuse for running a rake without the... Continue →