Search code examples
javascriptreactjsreact-dom

Multiple ReactDOM.render() throwing error Target container is not a DOM element

Trying to integrate React into a non-React project, so I need to able to render the react apps at multiple elements.

Here's the index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import Activation from './forms/Activation';
import EditButton from '../components/editButton';

ReactDOM.render(<EditButton></EditButton>, document.getElementById('edit-button'));
ReactDOM.render(<Activation></Activation>, document.getElementById('activate-form'));

I am getting this error: 

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

The first component, EditButton, does render successfully, but the second is unable too. If I move Activation to the top, then Activation will be the only component that renders.

Has anyone run into this issue? Any advice or direction would be greatly appreciated.

EDIT:

Because existing app isn't a SPA, depending on the route that user was on ('/' or '/product', etc.) the DOM element specified didn't exist. Fixed with just an if statement using getElementById, and if true ReactDOM.render().

Thanks!

Solution

  • First of all, check if script finds the second element. You can check it with something like this:

    console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))

    Also, check if there is only one element with each id exists on the page. And finally if this elements are not nested.