Element ref was specified as a string (trigger) but no owner was set.

[jvgomg]

I am trying to use this component in my app but getting the following error:

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

I cannot find the string "trigger" anywhere in the source code. Thanks for any help!

[mrchief]

This issue arises when you have multiple copies of react being loaded on the page. Its hard to pinpoint what is causing this without having more details but few common pitfalls are misconfigured webpack/npm dependencies.

E.g., misconfigured externals in webpack:

// bad:  
externals: {
  'react': 'react',
  'react-dom': 'ReactDOM'
}

// good 
externals: {
  'react': 'React',  // main entry point of React starts with capital R
  'react-dom': 'ReactDOM'
}

Another solution would be to delete mode_modules (destroy it completely, including any symlinks) and doing npm install again.

Make sure only one version of React is specified in your dependencies (including dev and peer dependencies).

[jvgomg]

@mrchief Thank you for your response - you helped fix the problem

Yes it was dependancy issue – I realise I am using React@16 but have a number dependancies that list React@15 in their dependancies. I managed to add a fixed alias to my Webpack configs.

config.resolve.alias.react = path.resolve(__dirname, 'node_modules', 'react')

Through my Googling I come across the recommendation that libraries should not list React in their dependancies but instead should use peerDependancies (devDependancies is fine). Should I create a pull request to do that?

[mrchief]

Should I create a pull request to do that?

Sure would love to have a PR on that!