web-dev-qa-db-fra.com

Erreur non interceptée: _registerComponent (...): le conteneur cible n'est pas un élément DOM. (…)

J'ai eu cette erreur lorsque j'ai exécuté ce code React:

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div id="root">
  <h1>Hello, world!</h1></div>,
  document.querySelector('#root')
);

Voici l'erreur:

bundle.js: 1194 Erreur non interceptée: _registerComponent (...): le conteneur cible n'est pas un élément DOM. (…)

javascriptreactjsdomreact-router
9
flower

Apparemment, vous avez oublié d'ajouter l'élément dans votre page qui est la raison pour laquelle react ne trouve pas de conteneur, pour éviter ce genre de problème, vous devez créer un élément div avec l'identifiant root ou vous devez changer votre sélecteur.

import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(
  <div id="root">
  <h1>Hello, world!</h1></div>,
  document.querySelector('body')
);

ou

<div id="root"></div>
12
Hajji Tarik

Essaye ça:

Dans le fichier Html:

<div id="root"></div>

Dans le fichier JS:

ReactDOM.render(
    <div>
        <h1>Hello World!</h1>
    </div>,
    document.getElementById('root')
);
2
Leo Nguyen

Il semble que vous ayez oublié de définir cet identifiant root dans votre page html, votre page html devrait contenir ce id, mettez cette ligne dans le corps, cela fonctionnera:

<div id="root"></div>

Vous avez défini le id au mauvais endroit, utilisez cette partie:

ReactDOM.render(
  <div>
     <h1>Hello, world!</h1>
  </div>,
  document.querySelector('#root')
);
2
Mayank Shukla

En général, cela devrait ressembler à ceci -> ReactDOM.render(Component, Container)

document.querySelector () devrait pointer vers le conteneur dans votre index.html comme Mayank l'a suggéré dans les commentaires. (document.querySelector('.container'))

Veuillez vous assurer de passer un composant React que vous avez créé comme ReactDOM.render(<App />, document.querySelector('.container')

1
skAstro