Invariant Violation: addComponentAsRefTo(...) in Electron (io.js, commonjs, es6)

[christian-schulze]

While attempting to use your component in an electron app, I've been seeing the following error thrown:-

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's render method). Try rendering this component inside of a new top-level component which will hold the ref.

Most of the articles online say this is caused by having two copies of react loaded at the same time. To work around this I'm first loading react into a global variable like this:

global.React = require('react');

And then making a minor change to the file react-tagsinput.js:4

    module.exports = factory(React ? React : require("react"));

Is this something you could incorporate into your code?

[olahol]

Which versions of React and react-tagsinput are you using? I changed React to a peer dependency recently to fix the problem with two versions of React loading.

[christian-schulze]

"react": "0.13.3"
"react-tagsinput": "1.4.1"

I'm putting together a minimal Electron app to reproduce, will post shortly.

[olahol]

Thank you, there might be some problem with the standard UMD that need to be fixed.

[christian-schulze]

After much pulling of hair, I've found this not to be a problem with your component.

My folder structure looks something like this:

root
|-- node_modules
|---- react
|-- app
|---- js
|------ index.js
|------ components
|-------- tag_input.js
|---- node_modules
|------ react
|------ react-tagsinput

The React constant is being required in app/js/index.js and app/js/components/tag_input.js. Unfortunately app/js/index.js is pulling in react from node_modules/react while app/js/components/tag_input.js is pulling it from app/node_modules/react.

I'm unsure why this was happening, but I've gotten around it by specifying a relative path in app/js/index.js like this:

let React = require('../node_modules/react');

[olahol]

Ok, thank you and good luck with your electron app 👍