Invariant Violation: _registerComponent(…): Target container is not a DOM element

By the time script is executed, document element is not available yet, because script itself is in the head. While it’s a valid solution to keep script in head and render on DOMContentLoaded event, it’s even better to put your script at the very bottom of the body and render root component to a div before it like this:

<html>
<head>
</head>
<body>
  <div id="root"></div>
  <script src="/bundle.js"></script>
</body>
</html>

and in the bundle.js, call:

React.render(<App />, document.getElementById('root'));

You should always render to a nested div instead of body. Otherwise, all sorts of third-party code (Google Font Loader, browser plugins, whatever) can modify the body DOM node when React doesn’t expect it, and cause weird errors that are very hard to trace and debug. Read more about this issue.

The nice thing about putting script at the bottom is that it won’t block rendering until script load in case you add React server rendering to your project.

Update: (October 07, 2015 | v0.14)

React.render is deprecated, use ReactDOM.render instead.

Example:

import ReactDOM from 'react-dom';

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

Related Posts:

  1. React Error: Target Container is not a DOM Element
  2. Invariant Violation: Objects are not valid as a React child
  3. Invariant Violation: Objects are not valid as a React child
  4. “SyntaxError: Unexpected token < in JSON at position 0"
  5. What is Virtual DOM?
  6. How to use Redirect in the new react-router-dom of Reactjs
  7. jQuery document.createElement equivalent?
  8. Understanding unique keys for array children in React.js
  9. How to do a redirect to another route with react-router?
  10. Jest spy on functionality
  11. Difference between npx and npm?
  12. How can I scroll to an element using jQuery?
  13. Include another HTML file in a HTML file
  14. TypeScript React.FC confusion
  15. Loop inside React JSX
  16. Can’t resolve module (not found) in React.js
  17. How to resolve the C:\fakepath?
  18. Understanding React-Redux and mapStateToProps()
  19. how to render a react component using ReactDOM Render
  20. React this.setState is not a function
  21. Parse Error: Adjacent JSX elements must be wrapped in an enclosing tag
  22. ‘react-scripts’ is not recognized as an internal or external command
  23. After $npm install, Getting Error: Cannot find module ‘../lib/utils/unsupported.js’
  24. React Native: this.setState is not a function
  25. React: trigger onChange if input value is changing by state?
  26. In reactJS, how to copy text to clipboard?
  27. SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag
  28. You should not use Route or withRouter() outside a Router when using react-router 4 and styled-component in react
  29. React-Router only one child
  30. What does the className attribute mean in JSX?
  31. What is prevState in ReactJS? [duplicate]
  32. React with ES7: Uncaught TypeError: Cannot read property ‘state’ of undefined
  33. Setting a backgroundImage With React Inline Styles
  34. React – TypeError: Cannot read property ‘props’ of undefined
  35. Remove all child elements of a DOM node in JavaScript
  36. What is the difference between state and props in React?
  37. How to pass props to {this.props.children}
  38. OnChange event using React JS for drop down
  39. querySelector vs. getElementById
  40. ESLint Parsing error: Unexpected token
  41. React Context vs React Redux, when should I use each one?
  42. Setting onSubmit in React.js
  43. How to import image (.svg, .png ) in a React Component
  44. Uncaught TypeError: Cannot read property ‘props’ of null
  45. ReactJS: setTimeout() not working?
  46. React Uncaught Error: Target container is not a DOM element [duplicate]
  47. How to implement authenticated routes in React Router 4?
  48. Difference between innerText, innerHTML and value?
  49. React Js: Uncaught (in promise) SyntaxError: Unexpected token < in JSON at position 0
  50. How to scroll to an element?
  51. How to handle the `onKeyPress` event in ReactJS?
  52. setInterval in a React app
  53. Cannot read property ‘bind’ of undefined. React.js
  54. How do you Hover in ReactJS? – onMouseLeave not registered during fast hover over
  55. Failed to compile. Module not found: Can’t resolve ‘react-router-dom’
  56. ReactJS: setTimeout() not working?
  57. Uncaught TypeError: Cannot read property ‘top’ of undefined
  58. How can I check if an element exists in the visible DOM?
  59. What does “export default” do in JSX?
  60. How can I select an element by name with jQuery?
  61. How can I add a class to a DOM element in JavaScript?
  62. Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop
  63. Warning: findDOMNode is deprecated in StrictMode. findDOMNode was passed an instance of Transition which is inside StrictMode
  64. Parse an HTML string with JS
  65. React.js – Can’t read property of undefined
  66. module.exports “Module is not defined”
  67. React’s setState method with prevState argument
  68. Pass react component as props
  69. Uncaught TypeError: Cannot read property ‘call’ of undefined at __webpack_require__
  70. Objects are not valid as a React child. If you meant to render a collection of children, use an array instead
  71. How to clear react-native cache?
  72. Async/await in componentDidMount to load in correct order
  73. Why use Redux over Facebook Flux?
  74. For loop for HTMLCollection elements
  75. Cannot read property ‘getHostNode’ of null
  76. Can’t perform a React state update on an unmounted component
  77. how to use react require syntax?
  78. onClick not working React js
  79. jQuery count child elements
  80. This.props.dispatch not a function – React-Redux
  81. How do I check if an element is hidden in jQuery?
  82. React-Router : What is the purpose of IndexRoute?
  83. React router not showing browser history
  84. e.target.value on an input field ReactJs, how does it work?
  85. Uncaught Invariant Violation: Rendered more hooks than during the previous render
  86. document.getElementbyId() returning null
  87. Retrieve the position (X,Y) of an HTML element
  88. command not found: jest
  89. Jest encountered an unexpected token
  90. ReactJS – .JS vs .JSX
  91. ReactJS: Maximum update depth exceeded error
  92. React, Uncaught ReferenceError: ReactDOM is not defined
  93. How to allow CORS in react.js?
  94. Uncaught ReferenceError: React is not defined
  95. How to disable button in React.js
  96. What does “export default” do in JSX?
  97. Getting or changing CSS class property with Javascript using DOM style
  98. where is create-react-app webpack config and files?
  99. JSX not allowed in files with extension ‘ .js’ with eslint-config-airbnb
  100. Getting “Cannot call a class as a function” in my React Project

Leave a Comment