Uncaught Error: целевой контейнер не является элементом DOM. (Реакт веб-страница ничего не показывает) - PullRequest
Новая
       28

Uncaught Error: целевой контейнер не является элементом DOM. (Реакт веб-страница ничего не показывает)

0 голосов
/ 30 октября 2018

Я следую учебному пособию, предоставленному 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"
  }
}

Моя файловая структура:

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: целевой контейнер не является элементом DOM.

Ответы [ 3 ]

0 голосов
/ 31 октября 2018

Проблема была решена! Мне пришлось удалить blaze-html-templates и добавить static-html 

meteor remove blaze-html-templates
meteor add static-html
0 голосов
/ 31 октября 2018

Обновить 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-шаблон как 

meteor remove blaze-html-templates

и добавить статическое, как показано ниже 

meteor add static-html
0 голосов
/ 30 октября 2018

Если вы включите свой package.json, вам будет легче выяснить, в чем ваша проблема. Кроме того, вы должны проверить create-react-app, чтобы быстро загрузить приложение реакции с минимальной суетой. Документы довольно просты и очень просты в настройке. Надеюсь, это было полезно.

...