web-dev-qa-db-ja.com

Meteor-Reactエラー：修正後のターゲットコンテナーはDOM要素ではありません

次のコードをコピーして貼り付けます： 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）at Object._renderNewRootComponent（modules.js？hash = de726ed…：30752）at Object._renderSubtreeIntoContainer（modules.js？hash = de726ed…：30842） .js？hash = de726ed…：30863）at app.js？hash = 71ef103…：46 at maybeReady（meteor.js？hash = 27829e9…：809）at HTMLDocument.loadingCompleted（meteor.js？hash = 27829e9…：821 ）

私を狂わせている……。

javascriptreactjsmeteor
14
Juanma Font

基本的に、問題はHTMLレンダリングが原因で発生します。流星アプリを作成すると、デフォルトで炎が出現し、反応を伴う流星または角度を伴う流星に取り組んでいます。このエラーは2つの方法で解決します。

方法1 main.jsにインポート文を追加するだけ

import './main.html';

方法2それは私の選択なので好ましい

meteor remove blaze-html-templates
meteor add static-html
43
Shraddha Goel

削除した場合blaze-html-templates追加する必要がありますstatic-htmlパッケージをコンパイルしてindex.htmlして、このエラーを回避します（ Meteor Guide 、段落の終わりを参照）：

 meteor add static-html
27
Xavier Priour

私も同じ問題を抱えていました。これは私がそれを解決した方法です。

ターミナルで、プロジェクトディレクトリに次の行を入力します。

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

私にとっては、DOMにレンダリングする前に.htmlファイルをインポートする必要がありました。

import './main.html';

8
JoshJoe
meteor remove blaze-html-templates
meteor add static-html
4
Ahmad Samawi

終了</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'));
});
1
Chris Hawkes

最初にブレイズテンプレートの依存関係を削除します

meteor remove blaze-html-templates

次に、静的なHTMLを追加します

meteor add static-html
1
Nimmi Verma

パッケージ（blaze-html-templates）を削除しました。

Meteor + Reactである必要はないと思いましたが、main.htmlのコンパイルに使用されています。

パッケージblaze-html-templatesを追加する

meteor add blaze-html-templates

問題を解く。

0
Juanma Font

私の場合、修正は簡単でした。 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>
0
ispirett