reactjs dando erro TypeError não capturado: A super expressão deve ser nula ou uma função, não indefinida

Eu estou usando reactjs.

Quando executo o código abaixo, o navegador diz:

TypeError não capturado: a super expressão deve ser nula ou uma função, não indefinida

Qualquer sugestão sobre o que está errado seria apreciada.

Primeiro, a linha usada para compilar o código:

browserify -t reactify -t babelify examples/temp.jsx  -o examples/public/app.js

E o código:

var React = require('react');

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

ATUALIZAÇÃO: Depois de queimar no fogo do inferno por três dias com esse problema, descobri que não estava usando a versão mais recente do react.

Instale globalmente:

sudo npm install -g react@0.13.2

instalar localmente:

npm install react@0.13.2

verifique se o navegador também está usando a versão correta:

<script type="text/javascript" src="react-0.13.2.js"></script>

Espero que isso salve outra pessoa em três dias de vida preciosa.

Nomes de classe

Primeiro, se você tiver certeza de que está estendendo da classe nomeada corretamente, por exemplo , React.Component , não React.component ou React.createComponent, pode ser necessário atualizar sua versão do React. Veja as respostas abaixo para obter mais informações sobre as classes a serem estendidas.

Atualização Reagir

O React suporta apenas classes no estilo ES6 desde a versão 0.13.0 (veja a postagem oficial do blog na introdução ao suporte aqui .

Antes disso, ao usar:

class HelloMessage extends React.Component

você estava tentando usar as palavras-chave do ES6 ( extends) para subclasse de uma classe que não foi definida usando o ES6 class. Provavelmente era por isso que você estava tendo um comportamento estranho com superdefinições, etc.

Então, sim, TL; DR - atualize para React v0.13.x.

Dependências circulares

Isso também pode ocorrer se você tiver uma estrutura de importação circular. Um módulo importando outro e o contrário. Nesse caso, você só precisa refatorar seu código para evitá-lo. Mais informações

Isso significa que você deseja subclassar algo que deveria ser Class, mas é undefined. Os motivos podem ser:

• erro de digitação Class extends ..., para que você estenda a variável indefinida
• erro de digitação import ... from, então você importa undefineddo módulo
• módulo referenciado não contém o valor, você deseja importar (por exemplo, módulo obsoleto - caso com React), portanto, importa valor não existente ( undefined)
• erro de digitação na export ...instrução do módulo referenciado , para que exporte a variável indefinida
• falta de exportinstrução do módulo referenciado , de modo que exporta apenasundefined

Também pode ser causado por um erro de digitação; portanto, em vez de Componentcom C maiúsculo, você tem componentcom c mais baixo, por exemplo:

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

Nota: A origem desse erro pode ser que exista Reacte acreditamos automaticamente que o que vem a seguir deve ser um método ou propriedade de reação que comece com uma letra minúscula, mas, na verdade, é outra Class ( Component) que deve começar com uma letra maiúscula .

No meu caso, com react-native, o erro foi que eu tinha

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

ao invés de

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

Eu experimentei isso ao perder uma instrução de exportação para a classe JSX.

Por exemplo:

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

Você também pode receber isso se estiver tentando executar React.Componentcom um erro ()na sua definição de classe.

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

O que às vezes consigo fazer quando estou convertendo de um componente funcional sem estado para uma classe.

Eu vi esse erro quando você tem uma dependência circular.

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

Para outras pessoas que possam desenvolver esse problema. Você também pode verificar se o componentmétodo in React.Componentestá em maiúsculas. Eu tive o mesmo problema e o que causou foi que eu escrevi:

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

Eu mudei para

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

e tudo funcionou bem

Eu recebi isso quando tive um erro de digitação na minha importação:

import {Comonent} from 'react';

Verifique se as classes que você estende realmente existem, poucos métodos React estão depreciados. Também pode ser um erro de digitação em 'React.Components'vez de'React.Component'

Boa sorte!!

Vou contribuir com outra solução possível, que funcionou para mim. Eu estava usando o índice de conveniência para coletar todos os componentes em um arquivo.

Não acredito que, no momento em que escrevo, isso seja oficialmente suportado por babel e gire o texto datilografado - no entanto, já o vi usado em muitos projetos e é definitivamente conveniente.

No entanto, quando usado em combinação com herança, parece gerar o erro apresentado na pergunta acima.

Uma solução simples é que os módulos que atuam como pais precisam ser importados diretamente, e não através de um arquivo de índice de conveniência.

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

Isso funcionou para mim:

import React, {Component} from 'react';

Webpack 4 Pedaços e Hashes com Uglificação por TerserPlugin

Isso pode ocorrer quando o Webpack usa blocos e hashes com minificação e desglificação via TerserPlugin (atualmente na versão 1.2.3). No meu caso, o erro foi reduzido à uglificação pelo Terser Plugin do meu vendors.[contenthash].jspacote que contém minhasnode_modules . Tudo funcionou quando não estava usando hashes.

A solução foi excluir o pacote nas opções de uglificação:

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

Mais informações

Eu tenho o mesmo problema, basta mudar de Navigatorpara{Navigator}

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

Não está correto para esta resposta, mas para outras pessoas com o mesmo erro, meu erro ridiculamente bobo poderia ajudar.

Estupidamente, meu problema foi usar a notação de função incluindo () após o nome da classe .

Verifique se sua sintaxe está correta. E você importou e exportou quaisquer componentes / módulos externos com os nomes e caminhos corretos.

Este modelo deve funcionar bem se você tiver uma versão nova do react instalada:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Minhas condições

• Criar-Reagir-App
• React-scripts v3.2
• Editor de texto rico Froala v3.1
• Modo de desenvolvimento funcionou bem
• A construção da produção foi interrompida com o erro mencionado na pergunta

Solução para o meu problema

Faça o downgrade do Froala para a v3.0.

Algo na v3.1 interrompeu nosso processo de criação do Create React App.

Atualização: use scripts de reação v3.3

Descobrimos que havia um problema entre o React Scripts 3.2 e o Froala 3.1.

A atualização para o React Scripts v3.3 nos permitiu atualizar para o Froala 3.1.

Eu escrevi

React.component

em vez de React.Component Esse era o meu problema)) e procurava isso por mais de meia hora.

No meu caso, eu estava usando:

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

o que estava errado, mas correto é:

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

verifique também se há
√ React.Component
NÃO
ˣ React.componentouReact.Components

Pode haver um pacote de terceiros causando isso. No nosso caso, foi deslumbrante . Temos configurações semelhantes às do @steine ​​( veja esta resposta acima ).

Para encontrar o pacote problemático, executei o build do webpack localmente com o modo de produção e, assim, consegui encontrar o pacote problemático no rastreamento da pilha. Então, para nós, isso forneceu a solução e eu pude manter a uglificação.

Usando Babel (5.8), recebo o mesmo erro se tentar usar a expressão export defaultem combinação com outras export:

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

Aqui está uma resposta:

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

No meu caso, corrigi esse erro alterando export default class yourComponent extends React.Component() {}para export default class yourComponent extends React.Component {}. Sim excluir os parênteses ()corrigiu o erro.

Eu experimentei esse erro ao importar componente como:

import React, { Components } from 'react';

ao invés de

import React, { Component } from 'react';

Veja se você tem um erro de digitação na importação ou na geração de classes, pode ser simplesmente isso.

Mude import React from 'react-dompara import React, {Component} from 'react'
E mude class Classname extends React.Componentpara class Classname extends Component
Se você estiver usando a versão mais recente do React (16.8.6 a partir de agora) .

Se você está recebendo esse erro e está usando o Browserify e o browserify-shim (como em uma tarefa do Grunt), pode ter passado por um momento tolo como eu, onde você disse sem quererbrowserify-shim para tratar o React como já parte do espaço de nomes global (por exemplo, carregado de uma CDN).

Se você deseja que o Browserify inclua o React como parte da transformação, e não um arquivo separado, verifique se a linha "react": "global:React"não aparece na "browserify-shim"seção do seu packages.jsonarquivo.

Isso também pode acontecer se você tiver usado em requirevez de importdentro do seu código.

Também aconteceu comigo quando usei isso:

class App extends React.Component(){

}

Em vez da correta:

class App extends React.Component{

}

Aviso: - () no primeiro, que é a principal causa deste problema

Para aqueles que usam react-native:

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

pode produzir esse erro.

Enquanto a referência reactdireta é o caminho mais estável a seguir:

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

No meu caso, foi a alteração React.Element para React.Component que corrige esse erro.