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


256

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


111
A partir de 0.14.8, aún puede obtener esto si hace algo como extends React.component(minúsculas c).
Kevin Suttle

12
@Kevin solo quiere reformular, básicamente, si tienes un error tipográfico en alguna parte, en mi caso fue en Componentslugar de Component :). Su comentario ayudó BTW
P-RAD

Mi problema era que no estaba exportando la clase al final del archivo ...
R01010010

2
Hice React.Components (plural), el derecho es React.Component (singular) Ow good ... ¿cómo me perdí eso ...
Ismael

55
@Kevin Suttle Tu comentario es en realidad más útil que la respuesta
Mick Jones,

Respuestas:


325

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 aquí .

Antes de eso, cuando se usa:

class HelloMessage extends React.Component

intentaba usar palabras clave de ES6 ( extends) para subclasificar de una clase que no se definió con ES6 class. Probablemente por esto te encontrabas con un comportamiento extraño con superdefiniciones, 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


202
Para todos los demás que tienen este problema, pero actualizar React no es la solución: desplácese más abajo hacia las otras respuestas, podría ser un simple error tipográfico. En mi caso, fue una definición de clase en React.componentlugar deReact.Component
Christian Benke

1
Para su información, la clase antigua también se puede ampliar con extends. Prueba esto var x = function(){}; class y extends x {}
Mouneer

2
Fue una estructura circular de importación para mí. ¡Gracias por ahorrarme muchas horas de depuración!
DrunkDevKek

44
Solo para tu información. Recientemente recibí el mismo error a pesar de estar en ReactJS 16.x. Resulta que tenía un error tipográfico en esta línea: class App extends React.Component () {...}- que debería corregirse a class App extends React.Component {...} (sin ()el final)
Atlas7

1
Componente capital 'C'! #facepalm
David

127

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

  • error tipográfico Class extends ..., por lo que extiende la variable indefinida
  • error tipográfico import ... from, por lo que importa undefineddesde 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 importa valor no existente ( undefined)
  • error tipográfico en la export ...declaración del módulo referenciado , por lo que exporta una variable indefinida
  • exportdeclaración faltante del módulo referenciado en absoluto, por lo que exporta soloundefined

23
En mi caso, era una minúscula de Componente en React.Component.
Estadísticas de aprendizaje por ejemplo

3
En mi caso, era una clase autoescrita no importada correctamente. Estaba importando la clase exportada predeterminada a través de en import {Foo} from 'bar'lugar de import Foo from 'bar'. Upvoted por lo tanto.
xtra

44
No hagas esto tampoco: class Thing extends React.Component() {- Tuve que eliminar el()
activedecay

En mi caso, este error fue causado por la creación accidental de una referencia circular por lo que estaba importando (la clase que quería extender a la subclase) en la función de representación de mis componentes. Cuando traté de ejecutar / renderizar la subclase ya que la superclase no se creó pero no estaba definida.
Leon

^ Causado por una referencia circular para mí también.
Cailen

90

También puede ser causada por un error tipográfico, por lo que, en lugar de utilizar ComponentC mayúscula, tiene componentuna C inferior, por ejemplo:

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

Nota: La fuente de este error puede deberse a que existe Reacty 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 letra mayúscula .


2
eh, curiosamente, este error no se detecta durante el paso de compilación del paquete web, pero se mostrará en tiempo de ejecución.
worc

31

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

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

en vez de

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

2
Esto funcionó en mi caso! La documentación proporcionada en el sitio react-native tiene este ejemplo con errores :)
habitual es el

Gracias, Componente debería importar desde 'reaccionar'
xyz

15

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

15

También puede recibir esto si está intentando ejecutar React.Componentcon una ()definición errónea en su clase.

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

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


Este fue el problema para mí. Muy tonto. ¡muchas gracias!
bstst

14

He visto este error cuando tienes una dependencia circular.

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

10

Para cualquier otra persona, eso puede desarrollar este problema. También puede verificar que el componentmétodo en React.Componentesté 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


6

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

import {Comonent} from 'react';

También obtuve esto con extend React.Components en lugar de React.Component (sin s).
Pierre Maoui

1
También obtuve esto, pero por escribir la primera letra pequeña de un componente - ... extiende React.component {}
Ivan Topić el

5

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

¡¡Buena suerte!!


En mi caso, estaba usando en React.componentlugar de React.Component(observe la "C" mayúscula que me faltaba)
Javis Perez

4

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 le da un giro mecanografiado, 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 {        
}

Esto me ayudó a descubrir qué hice mal. Envuelto accidentalmente el nombre del componente en {} en mi declaración de importación. Diferencia sutil. Puede ser difícil detectar ese error.
Dennis W

4

Esto funcionó para mí:

import React, {Component} from 'react';

4

Webpack 4 Trozos y Hashes con Uglificación por TerserPlugin

Esto puede ocurrir cuando Webpack usa 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 Terser Plugin de mi vendors.[contenthash].jspaquete que contiene minode_modules . 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


De hecho, esto resolvió el problema para mí, sin embargo, pude identificar al culpable y, al final, pude aplicar la uglificación. Vea mi respuesta: reaccionar-deslumbrar.
Erez Cohen

Me reduje al complemento terser, y finalmente el cambio de script de reacción a la versión 3.2.0 solucionó el problema.
avck

3

Tengo el mismo problema, solo cambio de Navigatora{Navigator}

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

1
básicamente debería coincidir así: export Foo ... import { Foo } - o - export default Foo ... import Foo
dpren

3

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 

3

Mis condiciones

  • Crear-reaccionar-aplicación
  • React-scripts v3.2
  • Froala rich text editor v3.1
  • El modo de desarrollo funcionó bien
  • La construcción de producción se rompió con el error mencionado en la pregunta

Solución a mi problema

Bajar de categoría a Froala a v3.0

Algo en v3.1 rompió nuestro proceso de creación de la aplicación Create React.

Actualización: Utilice los scripts de reacción v3.3

Descubrimos que había un problema entre React Scripts 3.2 y Froala 3.1.

La actualización a React Scripts v3.3 nos permitió actualizar a Froala 3.1.


1
te quiero. Quiero ir a buscarte y besarte los pies !!!!!!!!!!!!!!!!!!!!!!!!! (Pesadilla toda la noche terminada)
GaddMaster

No estoy usando la aplicación create react, pero estoy enfrentando el mismo problema en prod con froala 3.1. ¿Puedes explicar cuál era el problema aquí?
Karan Jariwala

2

He escrito

React.component

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


2

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 hay
React.Component
NO
ˣ React.componentoReact.Components


Bienvenido a SO. Parece claro que el OP no cometió este error, ya que han incluido la forma correcta en la pregunta. ¿Recibió el mismo error que OP pero con una causa diferente?
Eduardo

Sí, recibí el mismo error que OP pero descubrí que la causa era diferente y espero que esto ayude a otros.
Kush Gautam

2

Puede haber un paquete de terceros causando esto. En nuestro caso fue reaccionar-deslumbrar . 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. Entonces, para nosotros, esto proporcionó la solución y pude mantener la uglificación.


1

Usando Babel (5.8) obtengo el mismo error si trato de usar la expresión export defaulten combinación con alguna otra export:

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


1

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


1

Experimenté este error al importar componentes como:

import React, { Components } from 'react';

en vez de

import React, { Component } from 'react';

1

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


1

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


0

Si está recibiendo este error y está usando Browserify y browserify-shim (como en una tarea de Grunt), es posible que haya experimentado un momento tonto como lo hice yo donde involuntariamente le dijobrowserify-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"sección de su packages.jsonarchivo.


¿Cómo se evita Uncaught Error: Cannot find module 'react'después de eliminar la configuración browserify-shim? Básicamente quiero seguir reaccionando como una dependencia externa, pero browserify parece no entender cómo construir el paquete y mantener React externo. Esto puede o no ser porque el módulo que estoy incluyendo en mi punto de entrada de navegador ha reaccionado como una dependencia.
dmarr

FWIW, eliminar reaccionar de la configuración browserify-shim y dejar que browserify concilie la dependencia normalmente todavía da como resultado el problema del OP.
dmarr

0

Esto también puede suceder si lo hubiera usado en requirelugar de importdentro de su código.


0

Me pasó a mí también 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


0

Para aquellos que usan react-native:

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

puede producir este error

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

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

0

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

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.