Support for incompatible React

[lannn]

Today, i add emoji-mart to my project. I get the conflict React with following message:

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 should i do to resolve this problem?
Thanks you so much!

[EtienneLem]

Could I see a snippet of how you’re trying to use it?
What version of React are you using? I’ll try to reproduce.

[onekvinda]

I am getting the same error with React 15.3.0.

[EtienneLem]

Any chance I can see how you’re importing/using the library? Thanks!

[onekvinda]

Basically I am just trying that in the empty component, so nothing fancy

import React, {Component, PropTypes} from 'react';
import {emojify} from 'react-emojione';
import {Picker} from 'emoji-mart'

export default class MessageEditor extends Component {
    render() {
        return (
            <div>
                <Picker sheetURL='https://npmcdn.com/emoji-mart@0.2.0/sheets/sheet_apple_64.png'/>
            </div>
        )
    }
}

I can try that in some clean project to rule out it's not for example issue with the node modules in my current project

[EtienneLem]

It does look good.

There’s a chance that it’s because you have multiple versions of React installed locally.
Try npm ls | grep react, if you see more than one version that’s probably the issue.

You could either rm -rf node_modules and npm install or try only removing the extra React you don’t need.

[jeduan]

I had this same issue. I didn't have 2 reacts installed, however, It turned out that the culprit was that I had configured ProvidePlugin on webpack, like so:

plugins: [
  new webpack.ProvidePlugin({
      React: 'react'
  })
]

so it would see both React and react. The fix was loading Picker directly from src and make a special case in webpack's config to use emoji-mart's source.

import Picker from 'emoji-mart/src/components/picker';

on webpack.config:

loaders: [...,
  {
        test: /\.js$/,
        include: [
          path.join(__dirname, 'src'),
          path.join(__dirname, 'node_modules', 'emoji-mart')
        ],
        loader: 'babel-loader'
    },
]

[rachitGulati]

I am facing the same problem. Any update for this ?. I really liked this library and wanted to use it in my project.

I don't have duplicate react js version still I have tried rm -rf node_moduels and reinstalling it still no luck.

Just adding simple one line in my project

And it is showing the above error.

[EtienneLem]

Do you also use webpack.ProvidePlugin?
I’ll try to reproduce.

[rachitGulati]

Thanks for fixing it now it's working superb.

No I was not using the ProvidePlugin.