Is following errors based on Component or bundling or module or webpack_require

Question

i have the problem while compiling following react app

index.js

 var React = require('react');
    var ReactDOM = require('react-dom');


    var Todo = React.createClass({
    render:function(){
        (

            <h1>hai man iam mark!!</h1>
        )
    }
    });

    ReactDOM.render(<Todo/>,document.getElementById(Todo));

index.html

 <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title>chandru kingdom</title>
    </head>
    <body>
        <div id="Todo">
    <script src="/app/bundle.js"></script>
        </div>  
    </body>
    </html>

from the above codes i have the errors only. i dont know these all are component basis problem or dependency problem. from these codings i have using

bundle.js for the components.

my browser console tells me

>##Uncaught Error: _registerComponent(...): Target container is not a DOM element.##
    >at invariant (bundle.js:946)
    >at Object._renderNewRootComponent (bundle.js:11432)
    >at Object._renderSubtreeIntoContainer (bundle.js:11522)
    >at Object.render (bundle.js:11543)
    >at Object.<anonymous> (bundle.js:13455)
    >at __webpack_require__ (bundle.js:660)
    >at fn (bundle.js:84)
    >at Object.<anonymous> (bundle.js:31378)
    >at __webpack_require__ (bundle.js:660)
    >at module.exports (bundle.js:709)

how can i solve this please help me.

Thanks in advance!!!!

score 1 · Answer 1 · answered Mar 15 '17 at 14:38

The problem is that you're not passing a DOM element as second parameter to ReactDOM.render. document.getElementById searches for the given ID in the DOM, so it needs to be a string, but you're passing it your React component, therefore it will return null, which is clearly not a valid DOM element.

What you want instead is to put quotes around Todo:

ReactDOM.render(<Todo/>, document.getElementById('Todo'));

After fixing that issue, you'll get an error that Todo.render() does not return a valid React element. That's because you don't have a return statement and therefore it returns undefined. You probably just forgot the return, so just add the return statement:

render: function(){
    return (
        <h1>hai man iam mark!!</h1>
    )
}

score 0 · Accepted Answer · answered Mar 15 '17 at 14:41

0

ReactDOM.render(<Todo/>,document.getElementById("Todo"));

not

ReactDOM.render(<Todo/>,document.getElementById(Todo));

you need to select a dom element you do it by passing a string to getElementById

answered Mar 15 '17 at 14:41

Ahmed Eid

4,414
3
28
34

Is following errors based on Component or bundling or module or webpack_require

index.js

index.html

2 Answers2