javascript - reactdom - Infracción invariable:_registerComponent(...): el contenedor de destino no es un elemento DOM
uncaught error target container is not a dom element meteor (11)
/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 +)
Nota
: Tener
<script async src="..."></script>
en el encabezado asegura que el navegador comenzará a descargar el paquete de JavaScript
antes de
cargar el contenido HTML.
Fuente: React Starter Kit , isomorphic-style-loader
Me sale este error después de hacer una página de ejemplo de Reacción trivial:
Error no detectado: Infracción invariable: _registerComponent (...): el contenedor de destino no es un elemento DOM.
Aquí está mi código:
/** @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é significa esto?
Cuando se ejecuta el script, el elemento del
document
aún no está disponible, porque el
script
sí está en la
head
.
Si bien es una solución válida para mantener el
script
en la
head
y
renderizar en el evento
DOMContentLoaded
, es aún mejor
colocar el
script
en la parte inferior del
body
y
representar el componente raíz en un
div
antes de este:
<html>
<head>
</head>
<body>
<div id="root"></div>
<script src="/bundle.js"></script>
</body>
</html>
y en el
bundle.js
, llame a:
React.render(<App />, document.getElementById(''root''));
Siempre debe renderizar a un
div
anidado en lugar de
body
.
De lo contrario, todo tipo de código de terceros (Google Font Loader, complementos del navegador, lo que sea) puede modificar el nodo DOM del
body
cuando React no lo espera y causar errores extraños que son muy difíciles de rastrear y depurar.
Lea más sobre este tema.
Lo bueno de colocar la
script
de
script
en la parte inferior es que no bloqueará la representación hasta que se cargue la secuencia de comandos en caso de que agregue la representación del servidor React a su proyecto.
Actualización: (07 de octubre de 2015 | v0.14 )
React.renderestá en desuso, useReactDOM.renderenReactDOM.renderlugar.
Ejemplo:
import ReactDOM from ''react-dom'';
ReactDOM.render(<App />, document.getElementById(''root''));
En mi caso, este error fue causado por la recarga en caliente, al introducir nuevas clases. En esa etapa del proyecto, use observadores normales para compilar su código.
Me encontré con el mismo error. Resultó ser causado por un simple error tipográfico después de cambiar mi código de:
document.getElementById(''root'')
a
document.querySelector(''root'')
Observe el ''#'' que falta. Debería haber sido
document.querySelector(''#root'')
Solo publica en caso de que ayude a alguien más a resolver este error.
Me encontré con un mensaje de error similar / similar. En mi caso, no tenía el nodo DOM de destino que representa el componente ReactJS definido. Asegúrese de que el nodo de destino HTML esté bien definido con el "id" o "nombre" apropiado, junto con otros atributos HTML (adecuados para su necesidad de diseño)
Para aquellos que usan ReactJS.Net y obtienen este error después de una publicación:
Verifique las propiedades de sus archivos .jsx y asegúrese de que
Build Action
esté configurado en
Content
.
Los establecidos en
None
no se publicarán.
Encontré esta solución a partir de
esta respuesta SO
.
Si usa webpack para representar su reacción y usa HtmlWebpackPlugin en su reacción, este complemento construye su index.html en blanco por sí mismo e inyecta el archivo js en él, por lo que no contiene el elemento div, ya que HtmlWebpackPlugin docs puede construir su propio índice. html y dar su dirección a este complemento, en mi webpack.config.js
plugins: [
new HtmlWebpackPlugin({
title: ''dev'',
template: ''dist/index.html''
})
],
y este es mi archivo index.html
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="shortcut icon" href="">
<meta name="viewport" content="width=device-width">
<title>Epos report</title>
</head>
<body>
<div id="app"></div>
<script src="./bundle.js"></script>
</body>
</html>
es fácil simplemente hacer HTML CSS básico js y renderizar el script desde js
mport React from ''react'';
import ReactDOM from ''react-dom'';
import ''./index.css'';
var destination = document.querySelector(''#container'');
ReactDOM.render(
<div>
<p> hello world</p>
</div>, destination
);
body{
text-align: center;
background-color: aqua;
padding: 50px;
border-color: aqua;
font-family: sans-serif;
}
#container{
display: flex;
justify-content: flex;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<title> app </title>
</head>
<body>
<div id="container">
</div>
</body>
</html>
la función ready se puede usar así:
$(document).ready(function () {
React.render(<App />, document.body);
});
Si no desea usar jQuery, puede usar la función de
onload
:
<body onload="initReact()">...</body>
solo una conjetura, ¿qué tal si agregamos a index.html lo siguiente:
type="javascript"
Me gusta esto:
<script type="javascript" src="public/bundle.js"> </script>
¡Para mí funcionó! :-)
Sí, básicamente lo que hizo es correcto, excepto que olvida que JavaScript está sincronizado en muchos casos, por lo que ejecuta el código antes de que se cargue su DOM , hay pocas maneras de resolver esto:
1) Verifique si DOM está completamente cargado, luego haga lo que quiera, puede escuchar DOMContentLoaded, por ejemplo:
<script>
document.addEventListener("DOMContentLoaded", function(event) {
console.log("DOM fully loaded and parsed");
});
</script>
2) Una forma muy común es agregar la etiqueta del script al final de su
document
(después de la etiqueta del cuerpo):
<html>
<head>
</head>
<body>
</body>
<script src="/bundle.js"></script>
</html>
3) Usando
window.onload
, que se activa cuando se carga toda la página (img, etc.)
window.addEventListener("load", function() {
console.log("Everything is loaded");
});
4) Usando
document.onload
, que se activa cuando el
DOM
está listo:
document.addEventListener("load", function() {
console.log("DOM is ready");
});
Incluso hay más opciones para verificar si DOM está listo, pero la respuesta corta es NO ejecutar ningún script antes de asegurarse de que su DOM esté listo en todos los casos ...
JavaScript funciona junto con elementos DOM y si no están disponibles, devolverá nulo , podría romper toda la aplicación ... así que siempre asegúrese de estar completamente listo para ejecutar su JavaScript antes de hacerlo ...