react-bootstrap: Invariant violation when adding Navbar

I’m getting this error message

Error: 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.

when adding the following code:

<Navbar>
  <Nav navbar right>
    <NavItem onClick={this.props.handleCSV} href="#">Import CSV</NavItem>
  </Nav>
</Navbar>

About this issue

Original URL
State: closed
Created 9 years ago
Comments: 38 (13 by maintainers)

Most upvoted comments

I had this issue as well. Even with a single package, webpack loaded mulitple versions of react. Adding this to the webpack config helped resolve the problem.

resolve: { alias: { react: path.resolve(‘./node_modules/react’), }, },

FelixEickeler on Jan 30, 2017

Hmm. I made 99.99% certain that there isn’t any duplicate react. Also i use webpack alias to double sure that there is no duplicate react. From my debugging, i have found that the owner of the Navbar or Dropdown is null which causing this issue. I don’t see the same issue with other B-R components. screen shot 2016-08-11 at 7 39 15 pm

veeramarni on Aug 11, 2016

I’m also experiencing the same problem, using browserify and babel to generate a final bundle.js It only works if I remove the navbar. This is a new project and it’s pretty clean. I only have this issue with React Bootstrap. I’m using hundreds of components with this setup and don’t have any problem.

I believe it should be fixed. In order to make RB more popular, it should work in more environment configurations.

My package.json dependencies:

"dependencies": {
    "babel-preset-react": "^6.5.0",
    "babelify": "^7.3.0",
    "body-parser": "^1.15.1",
    "cookie-parser": "^1.4.2",
    "ejs": "^2.4.1",
    "express": "^4.13.4",
    "object-assign": "^4.1.0",
    "path": "^0.12.7",
    "react": "^15.1.0",
    "react-bootstrap": "^0.29.4",
    "react-dom": "^15.1.0",
    "shortid": "^2.2.6"
  }

Command for compiling: browserify -t [ babelify --presets [ react ] ] lib/client.jsx -o public/bundle.js

The code of the Navbar (copied and pasted from exemples):

var React = require('react');
var Nav = require('react-bootstrap').Nav;
var Navbar = require('react-bootstrap').Navbar;
var NavItem = require('react-bootstrap').NavItem;

var AppNavbar = React.createClass({
    render: function (params) {
        return (
            <Navbar>
                <Navbar.Header>
                    <Navbar.Brand>
                        <a href="#">MY APP</a>
                    </Navbar.Brand>
                    <Navbar.Toggle />
                </Navbar.Header>
                <Navbar.Collapse>
                    <Navbar.Text>
                        Signed in as: <Navbar.Link href="#">Pedro Israel</Navbar.Link>
                    </Navbar.Text>
                    <Navbar.Text pullRight>
                        Enjoy!
                    </Navbar.Text>
                </Navbar.Collapse>
            </Navbar>
        );
    }
});
module.exports = AppNavbar;

pisrael on May 22, 2016

I found my issue.

Since I’m using react-dom to render my page, I forgot to add the ReactDOM external to my webpack config file and I also forgot to include the ReactDOM distribution file to my html page.

externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
},

And in the head of my HTML file:

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

Hope this helps someone.

sgermain06 on Sep 21, 2016

@fedevela you apparently also don’t have react-bootstrap installed?

jquense on Aug 12, 2016