React.js Uncaught Error: _registerComponent(...): Target container is not a DOM element

Question

Hi I am getting this error:

main.js:808 Uncaught Error: _registerComponent(...): Target container is not a DOM element.

I have visited this question, but I cannot figure out what is wrong with what I am doing.

Here is the code I have right now:

routes.js:

export default (  
  <Route path="/" component={App}>
    <IndexRoute component={HomePage} />
  </Route>
);

app.js

const store = configureStore();

render(
  <Provider store={store}>
    <Router history={browserHistory} routes={routes} />
  </Provider>,
  document.getElementById('app')
);

homepage.js

class HomePage extends React.Component {
  render() {
    return (
      <div id="app">
        Hello
      </div>
    );
  }
}

export default HomePage;

I think that I am missing something easy but I am not sure what it is. I have tried modifying my code to match the answers of that other question but it didnt work out. Thank you for any help

If I am not wrong, you are trying to render you component App.js within HomePage, in that case, you are doing it wrongly. The TargetDOM element must be within HTML. — Shubham Khatri, Jun 06 '17 at 04:54

score 0 · Answer 1 · answered Jun 06 '17 at 06:24

The error says that document.getElementById('app') operation didn't find any corresponded html node in the page document. You have to create a <div id="app"></div> directly in your index.html so document.getElementById('app') could find it. Your <div id="app"> in HomePage container is useless as it's unavailable in DOM during React app initialization.

Also, be sure to inject your <script> with bundled React app after <div id="app"></div> (inject that <script> to the end of the body tag to be safe).

React.js Uncaught Error: _registerComponent(...): Target container is not a DOM element

1 Answers1