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

[MattReimer]

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.

[jckr]

seems to be the same issue as #730. closing this one and investigating on #730.

[nareshbhatia]

I am running into the exact same issue:

Invariant Violation: Element ref was specified as a string (container) but no owner was set.
This could happen for one of the following reasons:
1. You may be adding a ref to a functional 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.
    at invariant (http://localhost:6006/static/preview.bundle.js:5450:15)
    at coerceRef (http://localhost:6006/static/preview.bundle.js:36799:25)
    at reconcileSingleElement (http://localhost:6006/static/preview.bundle.js:37504:23)
    at reconcileChildFibers (http://localhost:6006/static/preview.bundle.js:37559:35)
    at reconcileChildrenAtExpirationTime (http://localhost:6006/static/preview.bundle.js:37689:30)
    at finishClassComponent (http://localhost:6006/static/preview.bundle.js:37857:5)
    at updateClassComponent (http://localhost:6006/static/preview.bundle.js:37806:12)
    at beginWork (http://localhost:6006/static/preview.bundle.js:38427:16)
    at performUnitOfWork (http://localhost:6006/static/preview.bundle.js:41239:16)
    at workLoop (http://localhost:6006/static/preview.bundle.js:41262:26)

In my case, I am creating a component library that I am testing using Storybook. The component is very simple:

function ProgressBar({ classes }) {
    const series1 = [{ y: 1, x: 20 }];
    const series2 = [{ y: 1, x: 10 }];
    const series3 = [{ y: 1, x: 70 }];
    const margin = { top: 0, bottom: 0, left: 0, right: 0 };

    return (
        <div className={classes.panel}>
            <FlexibleXYPlot stackBy="x" margin={margin}>
                <HorizontalBarSeries data={series1} color="#f2d200" />
                <HorizontalBarSeries data={series2} color="#404040" />
                <HorizontalBarSeries data={series3} color="#000000" />
            </FlexibleXYPlot>
        </div>
    );
}

It works perfectly if I put the code directly in an app created by create-react-app. So the issue has something to do with trying to put it in a library.

Based on "reason 1" in the error message, I even tried to convert the component into a class, but that does not help.

Will try to create a reproducible example tomorrow.

[nareshbhatia]

This is a hard one to track down. Doing npm ls react showed that react was being picked up from two places: my library and Storybook. I removed it from my library. Now Storybook is able to show the component. However, when I include the library in my app, I get the same error - and this time there are no two instances of react.

So I am again thinking the problem is because the ref exists in a function component. Looking at the error message, it is complaining about a ref called container. I can find it in the react-vis code here:

https://github.com/uber/react-vis/blob/b882563d8d93d459d08973fdd156148ffe129475/src/make-vis-flexible.js#L27

Wondering if that provides any clues. Would it be better to convert the react-vis function component into a class component?

[nareshbhatia]

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]

Turns out that it is extremely difficult to move storybook out of the way. It was sitting at the root level of my repository. I moved it down to my library package. However when I build my app, it somehow picks up a second copy of React from Storybook - even though it is defined as a devDependency. Same issue if I try to use Jest for testing. If I can't solve this issue, it's going to be impossible to test libraries :-(. I have created a reproducible example here: https://github.com/nareshbhatia/react-multiple-copies-issue. I hope someone can help me untangle this mess!

[craigbeck]

Seeing the same thing trying to setup a codepen to report another issue:

https://codepen.io/Premisedata/pen/gzPVKM?editors=0010

[radumiron]

Any solution to this problem? It's still reproducible on my environment, [email protected]

[benshope]

The bump to 1.10.0 should fix this

[benshope]

@radumiron not sure if 1.10.0 actually fixed the issue - re-opening

[radumiron]

@benshope I will upgrade to 1.10.0 tomorrow and let you know

[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.

[benshope]

@radumiron thanks but the latest bump does not solve the issue - just wait for me to merge #848
@nareshbhatia thanks! I might try that out

[benshope]

Fixed in 1.10.1

[MARPTS]

i meet the same problem. and delete the ./node_modules can fix

[vespak]

in my case this got resolved after disconnecting (yarn unlink) the linked project which was linked through yarn link. So try removing linked projects..

[realRoyHsu]

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>