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:

1. Clone the repo
2. yarn install in both child and parent
3. 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.

[iRoySwift]

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>

to

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

[nareshbhatia]

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.