CODEWITHSUNDEEP
javascriptreactjsreact-dom
SkyeBoniwell
SkyeBoniwell

Reputation: 7092

ReactDOM.render cannot find my div element

I am getting the classic error:

Error caught during routing: Error: Target container is not a DOM element.

on this line of code:

ReactDOM.render(<GamerTag game={this.model} />, document.getElementById("gameDescription"));

I am rendering that React dom inside a Backbone view.

gameDescription is the ID of a div in my view's template where the React component is being rendered.

Like everyone says, put your main js file at the bottom of your main index file.

And I did, I put <script src="~/dist/app.js"></script> right before the ending </body> tag.

But I still get the error.

I know the div exists, because when I view the source in the browser, I see it.

Also, if I use document.body.appendChild(document.createElement("div")) inside the ReactDOM.render, it works fine...well except for the fact that it's at the bottom of my page where I don't want it to be.

So I am horrid besides myself, what other options or things can I try? I am out of clues.

Thanks you!

Upvotes: 0

Views: 1077

Answers (1)

gillyb
gillyb

Reputation: 8910

Your element doesn't exist when react is trying to render your component.
I'm guessing this is because your backbone view isn't rendered at the time that react is trying to render the component.

An easy way to check this is to put a debugger; statement in your code just before your ReactDOM.render() call, and while stopped, open your DevTools, and look at the DOM and search for you element.
Or just open the console and run document.getElementById('gameDescription') and see if it's actually there.

Upvotes: 1

Related Questions