Uncaught Error: Target container is not a DOM element. (React webpage won't show anything)

Question

我一直在关注 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.

Answer 1

如果你包含了你的 package.json 那么就更容易找出你的问题所在。此外，您应该查看 create-react-app 以快速 bootstrap 以最少的麻烦构建 React 应用程序。这些文档非常简单明了并且非常容易设置。希望这对您有所帮助。

Answer 2

问题已解决！我不得不删除 blaze-html-templates 并添加 static-html

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

Answer 3

更新 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

Uncaught Error: Target container is not a DOM element. (React webpage won't show anything)

Uncaught Error: Target container is not a DOM element. (React webpage won't show anything)

javascript

web-applications

meteor

reactjs