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

[AnnatarHe]

Are you asking a question?

No, just a proposal

Are you reporting a bug or runtime error?

Yes. all error just after I upgrade react to version 16.

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

My code is here:

<Select
    name="foo"
    value={this.state.input.get('foo')}
    options={fooOptions}
    placeholder="foo"
    onChange={this.metaUpdateInput('foo')}
/>

and I review this repo, notice this line may occur this error:

ref={'value' + index}

in src/Select Line 929

React 16,
React-Select 1.0.0-rc.10

[ahashem]

check this one:
https://github.com/JedWatson/react-select/issues/606

[bring2dip]

Same error is occurring for me. Any solutions yet?

[AnnatarHe]

@bring2dip I abandon this package and code a select component for my project with same interface.

[bring2dip]

@AnnatarHe Can you share your code with me?

[AnnatarHe]

@bring2dip very simple implementation

[bring2dip]

@AnnatarHe i have used it with redux-form so it is a bit difficult for me to implement it in your way. Looks like i have to wait for this issue to be solved.

[AnnatarHe]

@bring2dip Sadly.😭

[ghost]

I have the same problem !!

[rstims]

Im seeing this error as well, but only when testing with enzyme/mocha...

[knoxjeffrey]

I finally resolved this by making an edit in my webpack setup to specifically state where to use the required version of react. Something similar to the following, with an alteration to the node modules path, will hopefully help some people:

resolve: { alias: { 'react': path.resolve(__dirname, '../../node_modules', 'react') } }

[koftunka]

@knoxjeffrey Thank you! Alias works for me. Noticed that to be a pattern for monorepo setup which involves multiple components referencing same libraries

[IlyaBeliaev]

@knoxjeffrey solved my problem, thank you.

[erik-sn]

For others running into this issue where the webpack alias or reinstalling node_modules did not work, I came across a case that affects the first, less common part of the error message referring to the refs.

We had an implementation where JSX was being stored in Redux and then rendered as a child from another connected component (a Modal in our case). In this case React is not aware of the child JSX as I guess it was not explicitly passed as a prop.

So the Element ref was specified as a string (value0) **but no owner was set** is what was affecting this problem. The fix is basically not to use this pattern which I think is not ideal in the first place.

[benjasHu]

In my case, simply upgrading react and react-dom to version 16.2.0 did the trick.

[dsacramone]

Still seeing this error even after updating to 16.2.0 for both react and react-dom....
any other solutions?

[seelts]

Another possible solution is to use joinValues property.
If you just need to get value from the select and don't rely on (native) form submitting this will help.

<Select joinValues ... />

And if you don't use multiple values (multi) then it will not affect you at all.

[mo-ib]

@seelts you just solved a nightmare problem I've been dealing with for almost a year. When using npm link to work locally on a module which includes react-select, it would crash on any change. Can you please explain a little more clearly about how joinValues negatively impacts native form submitting (I'm assuming you mean native HTML not react-native) so since I'm using redux-form I'm alright?

1000x thanks!

[seelts]

@threecity

You are welcome.

By saying «native form submitting» I mean the way how browsers and servers usually handle several inputs with the same name.
It is (actually was) a common practice to send an array (through URL or post body) like: items[]=a&items[]=b&items[]=c.
If you have a server-side code, written in some popular languages like PHP or Node.js, it will get items as an array ['a', 'b', 'c'].

So, what I've described above, is the default way how Select is trying to work, when joinValues is not defined or false. But it is failing to do so, because that part of code under the hood uses old-style refs.

But if you will enable joinValues, Select will execute another part of code, which uses correct refs. Values will be stored in one hidden input, separated by delimiter (comma , by default). In that case server-side code will get string like items='a,b,c' instead of array.

https://github.com/JedWatson/react-select/blob/master/src/Select.js#L1045-L1069

renderHiddenField (valueArray) {
  if (!this.props.name) return;
  if (this.props.joinValues) {
    let value = valueArray.map(i => stringifyValue(i[this.props.valueKey])).join(this.props.delimiter);
    return (
      <input
        disabled={this.props.disabled}
        name={this.props.name}
        ref={ref => this.value = ref}
        type="hidden"
        value={value}
      />
    );
  }
  return valueArray.map((item, index) => (
    <input
      disabled={this.props.disabled}
      key={`hidden.${index}`}
      name={this.props.name}
      ref={`value${index}`}
      type="hidden"
      value={stringifyValue(item[this.props.valueKey])}
    />
  ));
}

[FabioPicci]

@seelts thank you very much!

[bladey]

Hello -

In an effort to sustain the react-select project going forward, we're closing old issues.

We understand this might be inconvenient but in the best interest of supporting the broader community we have to direct our efforts towards the current major version.

If you aren't using the latest version of react-select please consider upgrading to see if it resolves any issues you're having.

However, if you feel this issue is still relevant and you'd like us to review it - please leave a comment and we'll do our best to get back to you!