Webpack、React 和 Babel，不渲染 DOM答案

【问题标题】：Webpack, React & Babel, not rendering DOMWebpack、React 和 Babel，不渲染 DOM
【发布时间】：2015-12-14 13:44:38
【问题描述】：

我终于在几个小时后完成了我的 Webpack、React 和 Babel 构建设置，但是当我尝试运行一个简单的渲染 Hello World 时，它不会在 DOM 中输出任何内容。

这是我的代码。

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>

当我查看我的 bundle.js 时，我可以看到它导入了运行渲染所需的所有 React 和 ReactDOM。

我正在运行的测试来自：https://facebook.github.io/react/docs/getting-started.html。

收到此控制台错误：Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.

【问题讨论】：

这里的
之间的空格可以去掉吗？那么到
看看这是否有帮助？您确定 index.html 中的 div-id 是内容吗？
抱歉 tha H1 中的空格是由 stackoverfly 整理的东西造成的
有史以来最糟糕的虚拟错误是的，我收到控制台错误。 Uncaught Error: Invariant Violation: _registerComponent(...): Target container is not a DOM element.
当你使用 webpack 时，查看“build”文件夹，并在 bundle.js 文件中搜索“Hello, World”。如果存在，请使用开发工具检查 bundle.js 是否已加载。
@gruberb - 它在 bundle.js 文件中，我确定了这一点，现在发出控制台错误。

标签： javascript reactjs webpack

【解决方案1】：

您的 bundle.js 文件在 DOM 有时间加载之前被加载。这意味着当您请求它时，它将无法找到您的<div id="content">。

尝试将脚本加载器放在正文的末尾。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
</head>
<body>
    <div id="content"></div>
    <script src="bundle.js"></script>
</body>
</html>

当浏览器找到<script> 标签时，它们会在下载文件时暂停执行。这意味着当您的 bundle.js 脚本开始执行时，您的 DOM 仅部分呈现。因此，您基本上会将undefined 传递给ReactDOM.render 方法。

如果您过去没有遇到过这个问题，也许您一直在使用jQuery.ready 事件处理程序，它在执行之前等待 DOM 加载。

【讨论】：

【解决方案2】：

bundle.js 在content 元素尚未被解析和创建时执行。只需将您的 script 元素移动到标记的 end。

【讨论】：

如果我没有决定胡扯并给出一个标记示例，我会打败你的:-)
感谢工作！ :) 我不知道这一点。这有点 Webpack 特有的吗？编辑：我也会给你一个答案复选标记
不，它实际上与 Webpack 无关。这就是 DOM 和 HTML 解析的工作方式。
脚本在解析后立即执行。
嗯，这就是正常情况下，我在标记正常（角度和反应）之前已经拥有了所有脚本并且一直在工作。知道我知道这一点，以备将来参考，谢谢你和@shennan。

之间的空格可以去掉吗？那么到

看看这是否有帮助？您确定 index.html 中的 div-id 是内容吗？