Violation invariante: _registerComponent (…): Le conteneur cible n'est pas un élément DOM

Je reçois cette erreur après une page d'exemple trivial React:

Erreur non détectée: Violation invariante: _registerComponent (…): Le conteneur cible n'est pas un élément DOM.

Voici mon code:

/** @jsx React.DOM */ 'use strict'; var React = require('react'); var App = React.createClass({ render() { return <h1>Yo</h1>; } }); React.renderComponent(<App />, document.body);

HTML:

 <html> <head> <script src="/bundle.js"></script> </head> <body> </body> </html>

Qu'est-ce que ça veut dire?

Lorsque le script de l'heure est exécuté, l'élément du document n'est pas encore disponible, car le script lui-même est en head . Bien qu'il s'agisse d'une solution valide pour garder le script en head et le rendre sur l'événement DOMContentLoaded , il est encore préférable de placer votre script au fond du body et de rendre le composant racine à un div avant cela comme ceci:

 <html> <head> </head> <body> <div id="root"></div> <script src="/bundle.js"></script> </body> </html>

Et dans votre code, appelez

 React.render(<App />, document.getElementById('root'));

Vous devriez toujours rendre à une division imbriquée au lieu du body . Sinon, toutes sortes de code tiers (Google Font Loader, plugins de navigateur, quoi que ce soit) peuvent modifier le nœud DOM du body lorsque React ne l'attend pas et provoquer des erreurs étranges qui sont très difficiles à tracer et à déboguer. En savoir plus sur ce problème.

La bonne chose à propos de mettre le script en bas, c'est qu'il ne bloquera pas le rendu jusqu'à ce que le script soit chargé au cas où vous ajoutez React server rendering à votre projet.

`/index.html`

 <!doctype html> <html> <head> <title>My Application</title> <!-- load application bundle asynchronously --> <script async src="/app.js"></script> <style type="text/css"> /* pre-rendered critical path CSS (see isomorphic-style-loader) */ </style> </head> <body> <div id="app"> <!-- pre-rendered markup of your JavaScript app (see isomorphic apps) --> </div> </body> </html>

`/app.js`

 import React from 'react'; import ReactDOM from 'react-dom'; import App from './components/App'; function run() { ReactDOM.render(<App />, document.getElementById('app')); } const loadedStates = ['complete', 'loaded', 'interactive']; if (loadedStates.includes(document.readyState) && document.body) { run(); } else { window.addEventListener('DOMContentLoaded', run, false); }

(IE9 +)

Remarque : Ayant <script async src="..."></script> dans l'en-tête assure que le navigateur va commencer à télécharger le bundail JavaScript avant que le contenu HTML ne soit chargé.

Source: React Starter Kit , isomorphic-style-loader

La fonction Ready peut être utilisée comme ceci:

 $(document).ready(function () { React.render(<App />, document.body); });

Si vous ne souhaitez pas utiliser jQuery, vous pouvez utiliser la fonction onload :

 <body onload="initReact()">...</body>

Juste une estimation sauvage, et comment ajouter à index.html ce qui suit:

 type="javascript"

comme ça:

 <script type="javascript" src="public/bundle.js"> </script>

Pour moi, ça a marché! 🙂

Dans mon cas, cette erreur a été causée par un rechargement à chaud, tout en introduisant de nouvelles classes. Dans cette étape du projet, utilisez des observateurs normaux pour compiler votre code.

Pour ceux qui utilisent ReactJS.Net et obtenant cette erreur après une publication:

Vérifiez les propriétés de vos fichiers .jsx et assurez-vous que Build Action est définie sur Content . Ceux définis sur None ne seront pas publiés. J'ai trouvé cette solution à partir de cette réponse SO .

J'ai rencontré un même message d'erreur similaire. Dans mon cas, je n'avais pas le noeud DOM cible qui devait définir le composant ReactJS défini. Assurez-vous que le noeud cible HTML est bien défini avec un "id" ou "nom" approprié, ainsi que d'autres attributs HTML (adaptés à votre besoin de conception)