Ошибка Meteor-React: Target Container не является элементом DOM после исправления

Скопируйте + вставьте код с: https://stackoverflow.com/info/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) при рендере (модули.js? hash = de726ed...: 30863) at app.js? hash = 71ef103...: 46 at maybeReady (meteor.js? hash = 27829e9...: 809) в HTMLDocument.loadingCompleted(meteor.js? hash = 27829e9...: 821 )

Меня сводит с ума.... ¡¡¡¡¡

Ответ 1

В основном проблема возникает из-за HTML-рендеринга. Когда вы создаете приложение метеоритов, оно по умолчанию походит на пламя, и вы работаете с метеором с реакцией или метеором с угловым. Вы решаете эту ошибку двумя способами.

Метод 1 просто добавьте оператор import в main.js

import './main.html';

Метод 2 Предпочитаемый, поскольку это мой выбор

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

Ответ 2

Если вы удалили blaze-html-templates вам нужно добавить static-html пакет для компиляции index.html и избежать этой ошибки (см. Руководство Meteor, конец абзаца):

 meteor add static-html

Ответ 3

У меня такая же проблема. Вот как я это решил.

В вашем терминале введите следующие строки в каталоге проекта.

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

Ответ 4

Для меня мне просто нужно было импортировать файл.html, прежде чем пытаться выполнить рендеринг в DOM.

import './main.html';

Ответ 5

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

Ответ 6

Добавьте свой тег скрипта до закрытия </body> скорее всего, скрипта, загруженного до вашего DOM-идентификатора.

также переключите это вокруг...

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'));
});

Ответ 7

Я удалил пакет (blaze-html-templates).

Я предположил, что быть Meteor + React не понадобится, но он используется для компиляции main.html.

Добавление пакета blaze-html-шаблонов с помощью

meteor добавить blaze-html-шаблоны

решать проблему.

Ответ 8

Сначала удалите зависимость шаблона пламени

meteor remove blaze-html-templates

Затем добавьте статический html

meteor add static-html

Ответ 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>