Search code examples
jqueryreactjspugreact-dom

jQuery and React.js aren't playing nice

The error:

_registerComponent(...): Target container is not a DOM element.

The line the is causing the is $('#container')in main.jsx. When I substitute that for document.getElementById('container') all is well. What am I doing wrong? Is jQuery not meant to work with React?

index.jade

doctype html
html
    head
        script(src="lib/babel/browser.min.js")
        script(src="lib/react/react.min.js")
        script(src="lib/react/react-dom.min.js")
        script(src="lib/jquery/dist/jquery.min.js")
    body
        #container

        script(src="public/js/main.jsx", type="text/babel")

main.jsx

$(function(){
    var Doug = React.createClass({
        render: function(){
            return (<h1>Hello world</h1>);
        }
    });

    ReactDOM.render(
        <Doug></Doug>,
        $('#container')
    );  
});
Solution

  • $('#container') is a jQuery object, not a DOM element, try $('#container')[0]