React Error (Only a Reactowner Can Have Refs.)

Only a ReactOwner can have refs despite running a single react copy and no broken refs

As I've written before, the error is horrible and the error message is unhelpful.

The actual reason was jquery (the project is being migrated to react but relies on some jquery plugins). Despite working properly, react would only allow it to be called through an import. Once I started calling it like this

import * as $ from 'jquery'

the app started working again.

addComponentAsRefTo(...): Only a ReactOwner can have refs[...] when clicking on a MenuItem

I have found the issue.

It seems that for some reason I was including React and ReactDOM in index.html (from node_modules) but also had it in package.json as a dependency.

  <script src="./node_modules/react/dist/react.js"></script>
  <script src="./node_modules/react-dom/dist/react-dom.js"></script>

I removed the two lines above from index.html and also these lines from my webpack configuration file:

externals: {

"react": "React",

"react-dom": "ReactDOM"

}

Only a ReactOwner can have refs

Move the ref from DOM.render into the component to obtain the component reference.

export class LayerSlider extends React.Component<any, {}> {
    ...
    element: any;

    render() {
        // the ref needs to be *here*
        return <div ref="element">
            {this.props.children}
        </div>;
    }
}

Render cannot be in the html below.

DOM.render(
    <div></div>,
    document.getElementById("lsl"));

React Error (Only a ReactOwner can have refs.)

Ok, I just browsed through this searchkit library. Based on the fact it's a React component and you are using react-rails, I'm almost certain you are running into the issue of having two React instances at one time. react-rails drawback is the difficulty to integrate external libraries with it. It's quick to setup and start using but as soon as you want to install other react libraries, you will hit a wall.

I had this issue before and what I did was to use https://github.com/netguru/react_webpack_rails instead. If you want something abit more then have a look at https://github.com/shakacode/react_on_rails. These two options require more effort to setup but well worth it if you are serious about React and its ecosystem.

BTW: Searchkit looks great!

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

In your webpack config use this in the external configuration like:

output: {
    path: __dirname + "/dist",
    filename: 'bundle.js',
    // library: 'hello-007',
    libraryTarget: 'umd',
  },
  externals: [{
    'react': {
      root: 'React',
      commonjs2: 'react',
      commonjs: 'react',
      amd: 'react'
    }
  }, {
    'react-dom': {
      root: 'ReactDOM',
      commonjs2: 'react-dom',
      commonjs: 'react-dom',
      amd: 'react-dom'
    }
  }],   
   module : {
    loaders : [
      {
        test : /\.js?/,
        loader : 'babel'
      }
    ]
  },

addComponentAsRefTo(...): Only a ReactOwner can have refs - Error in Form with Select List

This error is weird.

I've gotten by it by just changing string refs to what Facebook has said to start using. https://facebook.github.io/react/docs/refs-and-the-dom.html

So basically you want to do

ref={(i) => this._whateverYouWantToCallIt = i}

If that doesn't fix it, there may be a double React on your project.

React Package with Webpack - Only a ReactOwner can have refs

This is caused because of loading Multiple copies of React in a same project. This happens when your package has it own copy of React and you project which consumes your package has another.

This happen when you make React as a dependency in your package(supernova). You need to make React as a peerDependency. By doing this, your package will consume React from your project. If no React is found in the project, npm will throw an error/warning when you do npm i supernova.

• npm peerDependencies

---

Related Topics