reactjs que da error UnEdge TypeError: La superexpresión debe ser nula o una función, no está definida

Estoy usando reactjs.

Cuando ejecuto el código a continuación, el navegador dice:

Unkeught TypeError: Superexpresión debe ser nula o una función, no definida

Cualquier sugerencia sobre lo que está mal sería apreciada.

Primero, la línea utilizada para comstackr 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 
Hello
; } }

ACTUALIZACIÓN: Después de arder en el fuego del infierno durante tres días sobre este problema, descubrí que no estaba usando la última versión de reactjsr.

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é utilizando la versión correcta:

  

Espero que esto le ahorre a alguien más tres días de vida preciosa.

Nombres de clase

En primer lugar, si está seguro de que se está extendiendo desde la clase correctamente nombrada, 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 cuales extenderse.

Actualizar React

React solo ha admitido clases de estilo ES6 desde la versión 0.13.0 (consulte su publicación oficial en el blog aquí en la introducción del soporte).

Antes de eso, cuando se usa:

 class HelloMessage extends React.Component 

intentaba usar palabras clave ES6 ( extends ) a una subclase de una clase que no se definió con la class ES6. Probablemente fue por eso que te topabas con un comportamiento extraño con super definiciones, etc.

Por lo tanto, sí, TL; DR : actualice a React v0.13.x.

Dependencias circulares

Esto también puede ocurrir si tiene una estructura circular de importación. Un módulo que importa otro y al revés. En este caso, solo necesita refactorizar su código para evitarlo. Más información

Esto significa que quiere que la subclase sea algo, que debe ser Class , pero undefined está undefined . Las razones pueden ser:

  • typo in Class extends ... , por lo que extiende variable indefinida
  • error de import ... from , por lo que importa undefined desde el módulo
  • el módulo al que se hace referencia no contiene el valor, usted quiere importar (por ejemplo, módulo obsoleto – caso con React), por lo que importa un valor no existente ( undefined )
  • error tipográfico en la statement de export ... módulo a la que se hace referencia, por lo que exporta variables no definidas
  • módulo de referencia que falta enunciado de export , por lo que exporta solo undefined

También puede ser causado por un error tipográfico, por lo tanto, en lugar del Component con mayúscula C, tiene un component con una c más baja, por ejemplo:

 React.component //wrong. React.Component //correct. 

Nota: El origen de este error puede ser porque hay React y creemos automáticamente que lo que viene a continuación debe ser un método o propiedad de reacción que comience con una letra minúscula, pero en realidad es otra Clase ( Component ) que debe comenzar con un capital Carta de caso.

En mi caso, con react-native, el error fue que tuve

 import React, { AppRegistry, Component, Text, View, TouchableHighlight } from 'react-native'; 

en lugar de

 import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View, Image, AsyncStorage } from 'react-native'; 

Experimenté esto cuando faltaba un extracto de exportación para la clase JSX.

Por ejemplo:

 class MyComponent extends React.Component { } export default MyComponent // < - add me 

He visto este error cuando tienes una dependencia circular.

 class A extends B {} class B extends C {} class C extends A {} 

Para cualquier otra persona, eso puede desarrollar este problema. También puede verificar que el método del component en React.Component esté en mayúscula. Tuve ese mismo problema y lo que lo causó fue que escribí:

 class Main extends React.component { //class definition } 

Lo cambié a

 class Main extends React.Component { //class definition } 

y todo funcionó bien

También puede recibir esto si está intentando ejecutar React.Component con un erróneo () en su definición de clase.

 export default class MyComponent extends React.Component() {} ^^ REMOVE 

Lo cual a veces logro hacer cuando estoy convirtiendo de un componente funcional sin estado a una clase.

Lo recibí cuando tuve un error tipográfico en mi importación:

 import {Comonent} from 'react'; 

Verifique que las clases que extiende realmente existen, pocos métodos de React se deprecian, también podría ser un error Typo 'React.Components' lugar de 'React.Component'

¡¡Buena suerte!!

Voy a contribuir con otra posible solución, una que funcionó para mí. Estaba usando el índice de conveniencia para recostackr todos los componentes en un solo archivo.

No creo que al momento de escribir esto sea oficialmente compatible con babel, y mete la mecanografía en un giro, sin embargo, he visto que se usa en muchos proyectos y es definitivamente conveniente.

Sin embargo, cuando se usa en combinación con la herencia, parece arrojar el error presentado en la pregunta anterior.

Una solución simple es, para los módulos que actúan ya que los padres deben importarse directamente en lugar de hacerlo a través de un archivo de índice de conveniencia.

./src/components/index.js

 export Com1 from './com-1/Com1'; export Com2 from './com-2/Com2'; export Com3 from './com-3/Com3'; export Parent1 from './parent/Parent1'; 

./src/components/com-1/Com1.js

 import { Com2, Com3 } from '../index'; // This works fine class Com1 { render() { return ( 
); } }

./src/components/com-3/Com3.js

 import { Parent } from '../index'; // This does _not_ work class Com3 extends Parent { } 

./src/components/com-3/Com3.js

 import Parent from '../parent/Parent'; // This does work class Com3 extends Parent { } 

Tengo el mismo problema, simplemente cambie de Navigator a {Navigator}

 import Navigator from 'react-native-deprecated-custom-components' // to import {Navigator} from 'react-native-deprecated-custom-components' 

He escrito

 React.component 

en lugar de React.Component Ese fue mi problema)) y estaba buscando esto más de media hora.

Usando Babel (5.8) me sale el mismo error si trato de usar la expresión export default en combinación con alguna otra export :

 export const foo = "foo" export const bar = "bar" export default function baz() {} 

Si está recibiendo este error y está usando Browserify y browserify-shim (como en una tarea Grunt), puede haber experimentado un momento tonto como lo hice cuando involuntariamente le dijo a browserify-shim que tratara a React como parte del espacio de nombre global ( por ejemplo, cargado desde un CDN).

Si desea que Browserify incluya React como parte de la transformación, y no como un archivo separado, asegúrese de que la línea "react": "global:React" no aparece en la "browserify-shim" en su archivo packages.json .

Esto también puede suceder si ha utilizado require lugar de import dentro de su código.

También me sucedió cuando usé esto:

 class App extends React.Component(){ } 

En lugar de la correcta:

 class App extends React.Component{ } 

Aviso: – () en el primero que es la causa principal de este problema

No es correcto para esta respuesta, pero para otros con el mismo error, mi error ridículamente tonto podría ayudar.

Estúpidamente, mi problema fue utilizar la notación de funciones al incluir () siguiendo el nombre de la clase .

Asegúrate de que tu syntax sea correcta. Y ha importado y exportado componentes / módulos externos con los nombres y rutas correctos.

Esta plantilla debería funcionar bien si tiene instalada una versión nueva de react:

 import React, { Component } from 'react' class ExampleClass extends Component { render(){ return( 
) } } export default ExampleClass

En mi caso, yo estaba usando:

 class Root extends React.Component() { // THIS IS WORNG // After React.Component () < - WRONG!! } 

lo cual fue incorrecto pero correcto es:

 class Root extends React.Component { // THIS IS CORRECT // That -> '()' after React.Component was typo } 

también asegúrese de que haya
React.Component
NO
ˣ React.component o React.Components

Para aquellos que usan react-native :

 import React, { Component, StyleSheet, } from 'react-native'; 

puede producir este error.

Mientras que hacer referencia a react directamente es la manera más estable de ir:

 import React, { Component } from 'react'; import { StyleSheet } from 'react-native'; 

En mi caso fue React.Element cambio a React.Component que hace la corrección de este error.

Aquí hay una respuesta:

 import React, { Component } from 'react'; // NOT 'react-dom' 

En mi caso, arreglé este error cambiando export default class yourComponent extends React.Component() {} para export default class yourComponent extends React.Component {} . Sí, eliminar el paréntesis () corrigió el error.

Otra ocurrencia con Expo / react-native con mecanografía: a veces, cuando recomstack los archivos de mecanografía en el medio de un paquete, se pierde el empaquetador de reacción.

La única forma de hacer que mi aplicación se ejecute nuevamente es borrar el caché; si está utilizando expo cli, puede presionar la tecla R (que es una MAYÚSCULA ‘R’); esto reconstruirá todo el paquete. A veces cambiar al modo de desarrollo también ayuda ….

En mi caso, estaba usando un módulo npm con dependencias entre pares. El error fue causado por la configuración incorrecta ‘externa’ en la configuración del paquete web del módulo:

  externals: { react: 'react', react: 'prop-types', }, 

Debería ser:

 externals: { react: 'react', ['prop-types']: 'prop-types', }, 

Tuve este problema porque mis versiones de react y react-dom no coincidían después de una fusión.

Lo arreglé ingresando manualmente el número de versión que quería y volviendo a ejecutar la npm install .

En mi caso, resultó que React <15.3.0 no incluye React.PureComponent. Entonces codifique como:

 class MyClass extends React.PureComponent { //... } 

no funcionaria

Experimenté este error al importar componentes como:

 import React, { Components } from 'react'; 

en lugar de

 import React, { Component } from 'react'; 

Esto funcionó para mí:

 import React, {Component} from 'react';