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

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.

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

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

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 .

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

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

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.

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

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

import {Comonent} from 'react';

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

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 funcionó para mí:

import React, {Component} from 'react';

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

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'

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 

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.

He escrito

React.component

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

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

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.

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() {}

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() {}a export default class yourComponent extends React.Component {}. Sí, eliminar el paréntesis ()solucionó el error.

Experimenté este error al importar componentes como:

import React, { Components } from 'react';

en vez de

import React, { Component } from 'react';

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

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) .

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.

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

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

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

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