Meteor-React 错误：修复后目标容器不是 DOM 元素答案

【问题标题】：Meteor-React Error: Target Container is not a DOM element, after fixMeteor-React 错误：修复后目标容器不是 DOM 元素
【发布时间】：2017-11-14 09:15:29
【问题描述】：

我从https://stackoverflow.com/questions/41514549/复制+粘贴代码

然后，我修复错误并通过“id”更改“类”：

main.html

<head>
  <title>React Meteor Voting</title>
</head>
<body>
  <div id="render-target"></div>
</body>

main.jsx

import React, { Component } from 'react';
import {Meteor} from 'meteor/meteor';
import { render } from 'react-dom';

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

class App extends Component {
  render(){
    return (
      <h1>Hello!</h1>
    );
  }
}

package.json

{
  "name": "test-react",
  "private": true,
  "scripts": {
    "start": "meteor run"
  },
  "dependencies": {
    "babel-runtime": "^6.20.0",
    "meteor-node-stubs": "~0.2.4",
    "react": "^15.5.4",
    "react-dom": "^15.5.4"
  }
}

但我得到了同样的错误：

未捕获的错误：_registerComponent(...)：目标容器不是 DOM 元素。在不变量 (modules.js?hash=de726ed…:12672) 在 Object._renderNewRootComponent (modules.js?hash=de726ed…:30752) 在 Object._renderSubtreeIntoContainer (modules.js?hash=de726ed…:30842) 在渲染 (modules.js?hash=de726ed…:30863) 在 app.js?hash=71ef103…:46 在可能就绪 (meteor.js?hash=27829e9…:809) 在 HTMLDocument.loadingCompleted (meteor.js?hash=27829e9…:821)

快把我逼疯了……¡¡¡¡¡

【问题讨论】：

我也一样... Meteor 刚刚更新到 1.7 - 我在两周前运行了教程，当时它还是 1.6。然后一切正常。他们会不会弄坏了一些东西？ meteor.com/tutorials/react/components
使用'meteor create --react'不是更好吗？而不是经历创建然后删除默认blaze-template然后添加static-html的麻烦？不错的评论，但我相信解决此类错误的最佳方法是删除默认的 blaze-html-template，然后通过简单地使用命令行（视情况而定的命令提示符）到“流星删除 blaze-html-template”来创建” 然后“流星添加静态 html”。我相信这种方法会更好地最小化代码中的。
感谢这个帖子，它让我发疯了。可悲的是，斯科特没有更新他的课程，这很遗憾，因为他真的很聪明，而且他的内容是 A-class。

标签： javascript reactjs meteor

【解决方案1】：

将您的脚本标签添加到关闭 </body> 标签之前，很可能是在您的 DOM ID 之前加载的脚本。

也可以切换这个...

import React, { Component } from 'react';
import {Meteor} from 'meteor/meteor';
import { render } from 'react-dom';

class App extends Component {
  render(){
    return (
      <h1>Hello!</h1>
    );
  }
}

Meteor.startup(() => {
  render(<App />, document.getElementById('render-target'));
});

【讨论】：

我已经试过了，同样的结果，同样的错误。谢谢
对不起，我不明白你在说什么：“添加你的脚本标签”。 Meteor 有必要吗？

【解决方案2】：

我已经删除了包（blaze-html-templates）。

我认为 Meteor+React 不是必需的，但它用于编译 main.html。

使用

添加包 blaze-html-templates

流星或添加 blaze-html-templates

解决问题。

【讨论】：

你不需要blaze-html-templates，但如果你删除它你需要添加static-html包：

【解决方案3】：

如果您删除了blaze-html-templates，则需要添加static-html 包来编译您的index.html 并避免此错误（参见Meteor Guide，段落末尾）：

 meteor add static-html

【讨论】：

【解决方案4】：

对我来说，我只需要在尝试渲染到 DOM 之前导入 .html 文件。

import './main.html';

【讨论】：

【解决方案5】：

meteor remove blaze-html-templates
meteor add static-html

【讨论】：

为您的答案添加一些描述

【解决方案6】：

首先移除blaze模板依赖

meteor remove blaze-html-templates

然后添加静态html

meteor add static-html

【讨论】：

请使用格式以获得更好的可读性:) stackoverflow.com/help/formatting

【解决方案7】：

我遇到了同样的问题。我就是这样解决的。

在您的终端中，在项目目录中键入以下行。

meteor remove blaze-html-templates
meteor add static-html

【讨论】：

如果您正在使用 Steven Grider 的 Meteor 课程，这就是答案。
这对我有用。我想知道为什么它不在官方教程文档中

【解决方案8】：

基本上，问题是由于 HTML 渲染而发生的。当您创建流星应用程序时，默认情况下它会出现火焰，并且您正在处理带有反应的流星或带有角度的流星。您通过两种方法解决此错误。

方法一 只需在 main.js 中添加 import 语句

import './main.html';

方法2首选，因为这是我的选择

meteor remove blaze-html-templates
meteor add static-html

【讨论】：

更好的答案，因为解释
谢谢@niccolom。
它可以，但是如果您在删除添加后遇到任何问题，只需重新启动您的应用即可。
如果您打算使用 Meteor 的用户帐户 UI，您应该使用方法 1（导入 './main.html'），因为用户帐户 UI 需要 Blaze 模板。 'Todos App with React' 教程也是如此。

【解决方案9】：

就我而言，修复很简单。在 HTML 中将类更改为 id。

render( <h1>Hello</h1>, document.getElementById("app"))

<body>
<div class="app"><`enter code here`/div>
</body>

<body>
<div id="app"><`enter code here`/div>
</body>

【讨论】：

【解决方案10】：

这是一篇旧帖子，但它在谷歌搜索结果中排名第一，所以...

我在我的 android build 但不是 web 上遇到了这个错误，已经删除了 blaze 并添加了 statichtml..

我的问题最终是在我的 html 中导入了一个 favicon 和 manifest.json，但我还没有开始创建它们。

我删除了链接，它就像一个魅力。

希望这可以为某人节省几个小时的挖掘时间。

【讨论】：