Ad

Webpack, React & Babel, Not Rendering DOM

- 1 answer

I finally after hours made my Webpack, React & Babel build setup, but when I try to just run a simple render Hello World it doesn't output anything in the DOM.

Here is my code.

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

ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('content')
);
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<script src="bundle.js"></script>
</head>
<body>
	<div id="content"></div>
</body>
</html>

And when I watch my bundle.js I can see it imports all the React & ReactDOM I need to run the render.

The test I'm running is from: https://facebook.github.io/react/docs/getting-started.html.

Getting this console error: Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

Ad

Answer

bundle.js is executed when the content element isn't yet parsed an created. Just move your script element to the end of the markup.

Ad
source: stackoverflow.com
Ad