javascript - Uncaught Error : Target container is not a DOM element.(React 网页不会显示任何内容)-6ren

javascript - Uncaught Error : Target container is not a DOM element.(React 网页不会显示任何内容)

转载作者：行者123 更新时间：2023-11-29 10:58:03

27

4

我一直在关注 Meteor 提供的教程但无法正确运行提供的代码。启动应用程序后，页面上没有显示任何内容。可能是什么问题呢？

我使用的是 Meteor 平台版本 1.7。我已经使用命令安装了 React 依赖项:

meteor npm install --save react react-dom

我在浏览器控制台中也遇到了错误:

Uncaught Error: Target container is not a DOM element.
    at invariant (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:3462)
    at legacyRenderSubtreeIntoContainer (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22109)
    at render (modules.js?hash=bbd33713066b742f1084320f9ea66e4052f533c1:22190)
    at Meteor.startup (main.js:8)
    at maybeReady (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:927)
    at HTMLDocument.loadingCompleted (meteor.js?hash=0504f43f667698535416b00eb44eb6f53161cb63:939)

package.json:

{
  "name": "test",
  "private": true,
  "scripts": {
    "start": "meteor run",
    "test": "meteor test --once --driver-package meteortesting:mocha",
    "test-app": "TEST_WATCH=1 meteor test --full-app --driver-package meteortesting:mocha",
    "visualize": "meteor --production --extra-packages bundle-visualizer"
  },
  "dependencies": {
    "@babel/runtime": "^7.0.0",
    "meteor-node-stubs": "^0.4.1",
    "react": "^16.6.0",
    "react-dom": "^16.6.0"
  },
  "meteor": {
    "mainModule": {
      "client": "client/main.js",
      "server": "server/main.js"
    },
    "testModule": "tests/main.js"
  }
}

My file structure:

main.html:

<head>
    <title>Todo List</title>
</head>

<body>
    <h1>Hello!</h1>
    <div id="render-target"></div>
</body>

main.js:

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

import App from '../imports/ui/App.js';

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

main.css:

body {
    padding: 10px;
    font-family: sans-serif;
}

App.js:

import React, { Component } from 'react';

import Task from './Task.js';

// App component - represents the whole app
export default class App extends Component {
  getTasks() {
    return [
      { _id: 1, text: 'This is task 1' },
      { _id: 2, text: 'This is task 2' },
      { _id: 3, text: 'This is task 3' },
    ];
  }

  renderTasks() {
    return this.getTasks().map((task) => (
      <Task key={task._id} task={task} />
    ));
  }

  render() {
    return (
      <div className="container">
        <header>
          <h1>Todo List</h1>
        </header>

        <ul>
          {this.renderTasks()}
        </ul>
      </div>
    );
  }
}

Task.js:

import React, { Component } from 'react';

// Task component - represents a single todo item
export default class Task extends Component {
  render() {
    return (
      <li>{this.props.task.text}</li>
    );
  }
}

错误是:

Uncaught Error: Target container is not a DOM element.

最佳答案

如下更新main.js文件

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

import App from '../imports/ui/App.js';

import './main.html'

我已经导入了 main.html & 它应该可以工作。

同样没有上面的，你可以像这样删除 blaze-template

meteor remove blaze-html-templates

然后像下面这样添加静态

meteor add static-html

关于javascript - Uncaught Error : Target container is not a DOM element.(React 网页不会显示任何内容)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53071080/

27

4

0

文章推荐： ios - 在 UIScrollView 滚动时更改 UIImageView 中心点

文章推荐： javascript - 如何检查所有箭头函数是否为真？

rust - 如何将 serde_json::error::Error 转换为 reqwest::error::Error？
reqwest v0.9 将 serde v1.0 作为依赖项，因此实现 converting serde_json errors into reqwest error . 在我的代码中，我使用 se
error-handling - 有没有办法将 std::io::Error 转换为 failure::error::Error？
我有这个代码: let file = FileStorage { // ... }; file.write("Test", bytes.as_ref()) .map_err(|e| Mu
角度攀登: Error: No errors
我只是尝试用angular-cli创建一个新项目，然后运行服务器，但是它停止并显示一条有趣的消息:Error: No errors。我以这种方式更新了(希望有帮助):npm uninstall -g
payload - 我收到错误 : "MetaMask - RPC Error: Error: Error: [ethjs-rpc] rpc error with payload"
我从我的 javascript 发送交易 Metamask 打开传输对话框我确定 i get an error message in metamask (inpage.js:1 MetaMask -
error-handling - 使用 Box 装箱后如何处理不同的错误类型？
这个问题在这里已经有了答案: How do you define custom `Error` types in Rust? (3 个答案) How to get a reference to a
swift - error = error 与 error != nil 之间的区别
我想知道两者之间有什么大的区别 if let error = error{} vs if error != nil?或者只是人们的不同之处，比如他们如何用代码表达自己？例如，如果我使用这段代码: u
blazor - 错误 : Connection disconnected with error 'Error: Server returned an error on close: Connection closed with an error.'
当我尝试发送超过 50KB 的图像时，我在 Blazor 服务器应用程序上收到以下错误消息 Error: Connection disconnected with error 'Error: Serv
jsf - JSF : error handling with and JSF1073 error
我有一个error-page指令，它将所有异常重定向到错误显示页面我的web.xml: [...] java.lang.Exception /vi
node.js - 如何修复 'error: Error: syntax error - at value'
我有这样的对象: address: { "phone" : 888, "value" : 12 } 在 WHERE 中我需要通过 address.value 查找对象，但是在 SQL 中有函数
c++ - '标识符' : redefinition errors ( error C2011 & error C2370)
每次我尝试编译我的代码时，我都会遇到大量错误。这不是我的代码的问题，因为它在另一台计算机上工作得很好。我尝试重新安装和修复，但这没有帮助。这是整个错误消息: 1>------ Build starte
error-handling - Bison : one error causes additional but incorrect error
在我的代码的类部分，如果我写一个错误，则在不应该的情况下，将有几行报告为错误。我将'| error'放在可以从错误中恢复的良好/安全位置，但是我认为它没有使用它。也许它试图在某个地方恢复中间表情？有
Python捕获异常 "pandas.errors.ParserError: Error tokenizing data. C error"
我遇到了 csv 输入文件整体读取故障的问题，我可以通过在 read_csv 函数中添加 "error_bad_lines=False" 来删除这些问题来解决这个问题。但是我需要报告这些造成问题的文
java - Spring : How to resolve a validation error -> error code -> error message
在 Spring 中，验证后我们在 controller 中得到一个 BindingResult 对象。很简单，如果我收到验证错误，我想重新显示我的表单，并在每个受影响的字段上方显示错误消息。因此
eclipse - Java 运行时环境检测到 fatal error : Internal Error ; Error: ShouldNotReachHere()
我不知道出了什么问题，因为我用 Java 编程了大约一年，从来没有遇到过这个错误。在一分钟前在 Eclipse 中编译和运行工作，现在我得到这个错误: #A fatal error has been
postgresql - Postgres : Error [42601] Error: Syntax error at or near "$2". 执行查询时出错
SELECT to_char(messages. TIME, 'YYYY/MM/DD') AS FullDate, to_char(messages. TIME, 'MM/DD
.net - VB.NET : error BC30037, followed by error BC30627 and error BC30465
我收到这些错误: AnonymousPath\Anonymized.vb : error BC30037: Character is not valid. AnonymousPath\Anonymiz
sungridengine - 网格引擎 : error: commlib error: got select error (connection refused)
我刚刚安装了 gridengine 并在执行 qstat 时出现错误: error: commlib error: got select error (Connection refused) erro
php - 尖叫 : Error suppresion ignored for Parse error: syntax error PHP
嗨，我正在学习 PHP，我从 CRUD 系统开始，我在 Windows 上安装了 WAMP 服务器，当我运行它时，我收到以下错误消息。 SCREAM: Error suppression ignore
swift - fatal error : Unresolved error Error Domain=NSCocoaErrorDomain Code=134140
我刚刚开始一个新项目，我正在学习核心数据教程，可以找到:https://www.youtube.com/watch?v=zZJpsszfTHM 我似乎无法弄清楚为什么会抛出此错误。我有一个名为“Exp
c++ - JENKINS BUILD ERROR fatal error C1853 : precompiled header error
当我使用 Jenkins 运行新构建时，出现以下错误: "FilePathY\XXX.cpp : fatal error C1853: 'FilePathZ\XXX.pch' precompiled

首页

博学

6Ren·AI

商城

javascript - Uncaught Error : Target container is not a DOM element.(React 网页不会显示任何内容)