reactjs - props - react conceptos

reactjs dando error Tipo de error no detectado: la súper expresión debe ser nula o una función, no indefinida

Question

Estoy usando reactjs.

Cuando ejecuto el código debajo del navegador dice:

TypeError no capturado: la súper expresión debe ser nula o una función, no indefinida

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

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 codigo:

var React = require(''react'');

class HelloMessage extends React.Component {
  render() {
    return <div>Hello </div>;
  }
}

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

Instalar globalmente:

sudo npm install -g [email protected]

instalar localmente:

npm install [email protected]

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 salve a alguien más tres días de vida preciosa.

Answer 1

Aquí hay una respuesta:

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

Answer 2

Cambie import React from ''react-dom para import React, {Component} from ''react''
Y cambiar la class Classname extends React.Component a la class Classname extends Component
Si está utilizando la última versión de React (16.8.6 a partir de ahora) .

Answer 3

En mi caso estaba usando:

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

que estaba mal 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

Answer 4

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'';

Answer 5

En mi caso, fue React.Element change a React.Component lo que solucionó este error.

Answer 6

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

Answer 7

Esto funcionó para mí:

import React, {Component} from ''react'';

Answer 8

Esto significa que desea algo de subclase, que debería ser Class , pero undefined está undefined . Las razones pueden ser:

• error tipográfico en la Class extends ... , por lo que se extiende variable indefinida
• error tipográfico en import ... from , por lo que importa undefined desde el módulo
• el módulo al que se hace referencia no contiene el valor, desea importar (por ejemplo, módulo obsoleto - caso con React), por lo que importa un valor no existente ( undefined )
• error tipográfico en la declaración de export ... módulo referenciado, por lo que exporta una variable indefinida
• el módulo referenciado no tiene ninguna declaración de export , por lo que exporta solo undefined

Answer 9

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

Answer 10

Experimenté este error al importar componentes como:

import React, { Components } from ''react'';

en lugar de

import React, { Component } from ''react'';

Answer 11

Experimenté esto cuando me faltaba una declaración de exportación para la clase JSX.

Por ejemplo:

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

Answer 12

He escrito

React.component

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

Answer 13

He visto este error cuando tienes una dependencia circular.

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

Answer 14

Mire si tiene un error tipográfico en su importación o en su generación de clase, podría ser simplemente eso.

Answer 15

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 era usar la notación de función al incluir () después del nombre de la clase .

Asegúrese de que su sintaxis sea correcta. Y ha importado y exportado cualquier componente / módulo externo con los nombres y rutas correctos.

Esta plantilla debería funcionar bien si tiene instalada una versión más reciente de react:

import React, { Component } from ''react''

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Answer 16

Obtuve esto cuando tuve un error tipográfico en mi importación:

import {Comonent} from ''react'';

Answer 17

Otra ocurrencia con Expo / react-native con mecanografiado: a veces, cuando está volviendo a compilar los archivos mecanografiados en el medio de un paquete, el empaquetador de reacción se pierde.

La única forma de hacer que mi aplicación vuelva a ejecutarse es borrar el caché; si está utilizando la expo cli, puede presionar R (es una MAYÚSCULA ''R''); Esto reconstruirá todo el paquete. A veces, cambiar al modo de desarrollo también ayuda ...

Answer 18

Para aquellos que usan react-native :

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

puede producir este error

Mientras que la referencia directa react es la forma más estable de hacerlo:

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

Answer 19

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 el 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

Answer 20

Puede haber un paquete de terceros causando esto. En nuestro caso fue react-dazzle . Tenemos configuraciones similares a las de @steine ​​( vea esta respuesta más arriba ).

Para encontrar el paquete problemático, ejecuté la compilación del paquete web localmente con el modo de producción y, por lo tanto, pude encontrar el paquete problemático en el seguimiento de la pila. Así que para nosotros this proporcionó la solución y pude mantener la uglificación.

Answer 21

Si recibe este error y está usando Browserify y browserify-shim (como en una tarea de Grunt), es posible que haya experimentado un momento tonto como el que tuve cuando le dijiste involuntariamente a browserify-shim que tratara a React como parte del espacio de nombres global ( por ejemplo, cargado desde un CDN).

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

Answer 22

También me sucedió cuando usé esto:

class App extends React.Component(){

}

En lugar del correcto:

class App extends React.Component{

}

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

Answer 23

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

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

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

Answer 24

También puede ser causado por un error tipográfico, por lo que en lugar de Component con C mayúscula, tiene un component con c inferior, por ejemplo:

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

Nota: La fuente de este error puede deberse a que hay React y creemos que automáticamente 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 de hecho es otra Clase ( Component ) que debería comenzar con una mayúscula Carta de caso.

Answer 25

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

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

Answer 26

Usando Babel (5.8) obtengo el mismo error si intento 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() {}

Answer 27

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

¡¡Buena suerte!!

Answer 28

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

No creo que al momento de escribir esto sea respaldado oficialmente por Babel, y arroje el mecanografiado a un giro, sin embargo, lo he visto utilizado en muchos proyectos y definitivamente es 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 que los módulos que actúan como padres deben importarse directamente en lugar de 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 (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

./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 {        
}

Answer 29

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 deba actualizar su versión React. Vea las respuestas a continuación para obtener más información sobre las clases para ampliar.

Actualizar Reaccionar

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

Antes de eso, cuando se usa:

class HelloMessage extends React.Component

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

Entonces, sí, TL; DR - actualizar 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 viceversa. En este caso, solo necesita refactorizar su código para evitarlo. Más información

Answer 30

Webpack 4 Trozos y Hashes con Uglificación por TerserPlugin

Esto puede ocurrir cuando Webpack utiliza fragmentos y hashes con minificación y unglification a través de TerserPlugin (actualmente en la versión 1.2.3). En mi caso, el error se redujo a la uglificación por el complemento Terser de mis vendors.[contenthash].js paquete que contiene mis vendors.[contenthash].js . Todo funcionaba cuando no se usaban hashes.

La solución fue excluir el paquete en las opciones de uglification:

optimization: {
  minimizer: [
    new TerserPlugin({
      chunkFilter: (chunk) => {
        // Exclude uglification for the `vendors` chunk
        if (chunk.name === ''vendors'') {
          return false;
        }
        return true;
      },
    }),
  ],
}

Más información