web-dev-qa-db-fra.com

Erreur Meteor-React: le conteneur cible n'est pas un élément DOM, après réparation

Je copie + colle le code de: https://stackoverflow.com/questions/41514549/

Ensuite, je répare l'erreur et change 'classe' par 'id' donc:

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"
  }
}

Mais j'ai la même erreur:

Erreur non capturée: _registerComponent (...): le conteneur cible n'est pas un DOM élément. at invariant (modules.js? hash = de726ed…: 12672) sur Object._renderNewRootComponent (modules.js? hash = de726ed…: 30752) sur Object._renderSubtreeIntoContainer (modules.js? hash = de726ed…: 30842) at render (modules.js? hash = de726ed…: 30863) à app.js? hash = 71ef103…: 46 peut-être en attente (météore.js? hash = 27829e9…: 809) at HTMLDocument.loadingCompleted (meteor.js? hash = 27829e9…: 821)

Est-ce que me rend fou .... ¡¡¡¡¡

javascriptreactjsmeteor
11
Juanma Font

Fondamentalement, le problème se produit en raison du rendu HTML. Lorsque vous créez l'application météore, celle-ci apparaît par défaut et vous travaillez sur le météore avec react ou météore avec angular. Vous résolvez cette erreur par deux méthodes.

Méthode 1 Il suffit d'ajouter une déclaration d'importation dans main.js

import './main.html';

Méthode 2 Préférable car c'est mon choix

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

Si vous avez supprimé blaze-html-templates, vous devez ajouter le paquet static-html pour compiler votre index.html et éviter cette erreur (voir Guide Meteor , fin du paragraphe):

 meteor add static-html
27
Xavier Priour

J'ai eu le même problème. Voici comment je l'ai résolu.

Dans votre terminal, tapez les lignes suivantes dans le répertoire du projet. 

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

Pour moi, je devais simplement importer le fichier .html avant d'essayer de rendre le rendu au DOM.

import './main.html';

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

Ajoutez votre balise de script à la balise </body> de fermeture, probablement le script chargé avant votre ID DOM. 

changez aussi cela ...

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

J'avais retiré le paquet (blaze-html-templates).

J'ai supposé qu'être un météore + réactif ne serait pas nécessaire mais il est utilisé pour compiler le fichier main.html.

Ajouter le paquet blaze-html-templates avec 

météore ajoute blaze-html-templates

résoudre le problème.

0
Juanma Font

Commencez par supprimer la dépendance du modèle blaze 

meteor remove blaze-html-templates

Ajoutez ensuite du HTML statique

meteor add static-html
0
Nimmi Verma