ReactJS genera un error de tipo no detectado: la superexpresión debe ser nula o una función, no indefinida
Estoy usando ReactJS.
Cuando ejecuto el código siguiente, el navegador dice:
TypeError no detectado: la superexpresión debe ser nula o una función, no indefinida
Se agradecería cualquier pista sobre lo que está mal.
Primero la línea utilizada para compilar el código:
browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js
Y el código:
var React = require('react');
class HelloMessage extends React.Component {
render() {
return <div>Hello </div>;
}
}
ACTUALIZACIÓN: Después de arder en el infierno durante tres días con este problema, descubrí que no estaba usando la última versión de reaccionar.
Instalar globalmente:
sudo npm install -g react@0.13.2
instalar localmente:
npm install react@0.13.2
asegúrese de que el navegador también esté usando la versión correcta:
<script type="text/javascript" src="react-0.13.2.js"></script>
Espero que esto le ahorre a alguien más tres días de preciosa vida.
Nombres de clase
En primer lugar, si está seguro de que está extendiendo desde la clase con el nombre correcto, por ejemplo, React.Component , no React.component o React.createComponent, es posible que necesite actualizar su versión de React. Consulte las respuestas a continuación para obtener más información sobre las clases desde las que se puede ampliar.
Actualizar reaccionar
React solo ha admitido clases de estilo ES6 desde la versión 0.13.0 (consulte la publicación oficial del blog sobre la introducción del soporte aquí ).
Antes de eso, al usar:
class HelloMessage extends React.Component
Estaba intentando usar palabras clave de ES6 ( extends) para crear una subclase de una clase que no estaba definida usando ES6 class. Probablemente esta fue la razón por la que te encontraste con un comportamiento extraño con superdefiniciones, etc.
Entonces, sí, TL;DR : actualice a React v0.13.x.
Dependencias circulares
Esto también puede ocurrir si tiene una estructura de importación circular. Un módulo importa otro y al revés. En este caso sólo necesitas refactorizar tu código para evitarlo. Más información
Esto significa que quieres subclasificar algo, que debería ser Class, pero es undefined. Las razones podrían ser:
- error tipográfico
Class extends ..., por lo que extiendes la variable indefinida - error tipográfico
import ... from, por lo que importaundefineddesde el módulo - El módulo al que se hace referencia no contiene el valor que desea importar (por ejemplo, módulo obsoleto - caso con React), por lo que está importando un valor no existente (
undefined). - Error tipográfico en
export ...la declaración del módulo al que se hace referencia, por lo que exporta una variable indefinida - Al módulo
exportal que se hace referencia le falta una declaración, por lo que exporta soloundefined
También puede ser causado por un error tipográfico, por lo que en lugar de Componentcon C mayúscula, tienes componentc minúscula, por ejemplo:
React.component //wrong.
React.Component //correct.
Nota:
La fuente de este error puede deberse a que existe Reacty pensamos automáticamente que lo que viene a continuación debería ser un método o propiedad de reacción que comience con una letra minúscula, pero en realidad es otra Clase ( Component) que debería comenzar con una letra mayúscula. .
