react-vis: React Error: "Element ref was specified as a string (series0) but no owner was set."

I’m noticing an error when I use react-vis in an npm package that I then import into another product.

In my project, the parent package is the “App” and the child package contains re-usable components including the XYPlot from the Getting Started section of the documentation

The plot renders fine when I view it in the child project but shows the following error when imported into the parent:

Element ref was specified as a string (series0) but no owner was set. You may have multiple copies of React loaded. (details: https://fb.me/react-refs-must-have-owner).

I’m really new react so I’m not 100% sure I haven’t done something wrong but I thought others might have seen this already.

Update:

I realize this isn’t much to go on but there are too many moving pieces for a really good repro description so I made a simple repo using create-react-app with two linked projects that “seems” to reproduce this error.

https://github.com/MattReimer/react-vis-repro-736

Repo steps:

Clone the repo
yarn install in both child and parent
Link the child to the parent and boot up the parent:

cd child
yarn link
cd ../parent
yarn link child

yarn start

I’m really hoping this is something I’m doing wrong.

About this issue

Original URL
State: closed
Created 6 years ago
Comments: 16 (5 by maintainers)

Most upvoted comments

I am running into the exact same issue:

Element ref was specified as a string (scrollbar) but no owner was set. This could happen for one of the following reasons:
1. You may be adding a ref to a function component
2. You may be adding a ref to a component that was not created inside a component's render method
3. You have multiple copies of React loaded
See https://fb.me/react-refs-must-have-owner for more information.

I solved the problem: update it

 <div ref="ScrollbarRef ">
                {/* eslint-disable-next-line */}
                {this.props.children}
            </div>

 <div ref={el => this.ScrollbarRef = el}>
                {/* eslint-disable-next-line */}
                {this.props.children}
            </div>

iRoySwift on Jul 16, 2019

I don’t know what the change with 1.10.0 is, but I have solved the issue using Yarn Workspaces. It makes sure that only one copy of React is included in the final build. I wrote about my whole experience in a Medium article: https://medium.com/@NareshBhatia/sharing-ui-components-with-lerna-and-yarn-workspaces-be1ebca06efe. Hope you find it useful.

nareshbhatia on Jun 28, 2018

The bump to 1.10.0 should fix this

benshope on Jun 28, 2018

Got it to work finally. Phew!!! The issue is definitely multiple copies of React. In my case, the final app was somehow picking up a copy of react from storybook. The moment I removed storybook, everything started working. Now I just need to figure out how to restructure my packages so that storybook and its stories are completely out of the way.

nareshbhatia on Apr 6, 2018