React-color: Uncaught Invariant Violation: addComponentAsRefTo(...):

[widirizki]

After installation, I got this following error:

Uncaught Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method, or you have multiple copies of React loaded (details: https://fb.me/react-refs-must-have-owner).

What's that mean? What's wrong with my installed package before?

[casesandberg]

Are you setting a ref on the component?

[widirizki]

@casesandberg No, I don't set a ref at all in my component. Anything wrong with my react? I use react version 0.14.7. Should I provide another info for you? Thanks.

[Mokto]

I have this issue as well.

Thanks !

[nomadtechie]

Likewise.

[nomadtechie]

My issue was actually unrelated..so nevermind, :-)

[actionnick]

In your project directory...

rm -rf node_modules && npm install

Brute force but this works. This is caused by react-color loading up a different _copy_ of react when bundling. You can check for multiple versions of React by doing npm ls | grep react.

More Info

[Mokto]

Thanks @actionnick it resolved the issue !

[MichaelTaylor3D]

I get this issue, it seems that react color picker installs react in the node modules, not sure why since its set as a peer dependancy. Deleting the react folder in the color pickers node_modules folder seems to work, however, it breaks jenkins since it reinstalls the modules on every build.

[hyunchulkwak]

Thanks @MichaelTaylor3D

I added postinstall scripts on package.json to workaround the issue for now.

"scripts": {
  "postinstall": "rimraf node_modules/react-color/node_modules/react"
}

[mjj2000]

@hyunchulkwak, thanks for the workaround but I still get errors of peer dependency when I install with nested npm modules that is more than two levels.

Finally I found another solution for webpack.
Just add an alias path of react to path.resolve('./node_modules/react') to use common react for all npm modules required by webpack.

Hope this helps~

Reference: http://stackoverflow.com/questions/31169760/how-to-avoid-react-loading-twice-with-webpack-when-developing