Responsejs дает ошибку Uncaught TypeError: Супер выражение должно быть либо null, либо функцией, а не undefined

Я использую реакцию.

Когда я запускаю код ниже, браузер говорит:

Uncaught TypeError: выражение Super должно иметь значение null или функцию, а не undefined

Любые намеки на все, что не так, будут оценены.

Сначала строка, используемая для компиляции кода:

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

И код:

var React = require('react');

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

UPDATE: После сжигания в адском огне в течение трех дней по этой проблеме я обнаружил, что не использовал последнюю версию реакции.

Установить глобально:

sudo npm install -g [email protected]

установить локально:

npm install [email protected]

убедитесь, что браузер также использует правильную версию:

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

Надеюсь, это спасет кого-то еще три дня драгоценной жизни.

ОТВЕТЫ

Ответ 1

Имена классов

Во-первых, если вы уверены, что вы расширяетесь от правильно названного класса, например. React.Component, а не React.component или React.createComponent, вам может потребоваться обновить версию React. См. Ответы ниже для получения дополнительной информации о расширениях классов.

Реакция обновления

React поддерживает только классы класса ES6 начиная с версии 0.13.0 (см. их официальное сообщение в блоге о введении поддержки .

До этого при использовании:

class HelloMessage extends React.Component

вы пытались использовать ключевые слова ES6 (extends) для подкласса из класса, который не был определен с использованием ES6 class. Вероятно, вы столкнулись с странным поведением с определениями super и т.д.

Итак, да, TL; DR - обновить до React v0.13.x.

Циркулярные зависимости

Это также может произойти, если у вас есть циклическая структура импорта. Один модуль импортирует другой и наоборот. В этом случае вам просто нужно реорганизовать свой код, чтобы избежать его. Дополнительная информация

Ответ 2

Это означает, что вы хотите, чтобы подкласс чего-то, что должно быть Class, но есть undefined. Причины могут быть следующими:

  • typo in Class extends ..., поэтому вы расширяете переменную undefined
  • typo in import ... from, поэтому вы импортируете undefined из модуля
  • ссылочный модуль не содержит значения, вы хотите импортировать (например, устаревший модуль - case with React), поэтому вы импортируете не существующее значение (undefined)
  • typo в ссылочном модуле export ..., поэтому он экспортирует переменную undefined
  • отсутствует модуль export отсутствует, поэтому он экспортирует только undefined

Ответ 3

Он также может быть вызван ошибкой typo, поэтому вместо Component с капиталом C у вас есть Component с более низким c, например:

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

Примечание: Источником этой ошибки может быть, потому что существует React, и мы думаем автоматически, что будет дальше, должен быть метод реагирования или свойство, начинающееся с строчной буквы, но на самом деле это еще один класс (Component), который должен начинаться с буквы основного письма.

Ответ 4

В моем случае, с реакцией-native, ошибка заключалась в том, что у меня был

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

вместо

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

Ответ 5

Я испытал это при отсутствии инструкции экспорта для класса JSX.

Например:

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

Ответ 6

Я видел эту ошибку, когда у вас есть круговая зависимость.

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

Ответ 7

Вы также можете получить это, если вы пытаетесь выполнить React.Component с ошибочным () в определении вашего класса.

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

Что мне иногда удается сделать, когда я перехожу из функционального компонента без состояния в класс.

Ответ 8

Для любых других лиц, которые могут разработать эту проблему. Вы также можете проверить, что метод component в React.Component является заглавным. У меня была та же проблема, и что вызвало это, я написал:

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

Я изменил его на

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

и все сработало хорошо

Ответ 9

Я получил это, когда у меня была опечатка на моем импортировании:

import {Comonent} from 'react';

Ответ 10

Проверить, что классы, которые вы расширяете, фактически существуют, несколько методов React амортизируются, также может быть ошибка Typo 'React.Components' вместо 'React.Component'

Удачи!!

Ответ 11

Я собираюсь внести еще одно возможное решение, которое сработало для меня. Я использовал индекс удобства для сбора всех компонентов в один файл.

Я не верю, что на момент написания это официально поддерживается babel и бросает typescript в спину - однако я видел, что он используется во многих проектах и ​​определенно удобен.

Однако при использовании в сочетании с наследованием, похоже, возникает ошибка, представленная в вопросе выше.

Простым решением является то, что для модулей, которые действуют как родители, необходимо импортировать напрямую, а не через индексный индекс удобства.

./SRC/компоненты/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/компоненты/ком-1/Com1.js

import { Com2, Com3 } from '../index';

// This works fine
class Com1 {        
    render() {
        return (
            <div>
                <Com2 {...things} />
                <Com3 {...things} />
            </div>
        );
    }
}

./SRC/компоненты/ком-3/Com3.js

import { Parent } from '../index';

// This does _not_ work
class Com3 extends Parent {        
}

./SRC/компоненты/ком-3/Com3.js

import Parent from '../parent/Parent';

// This does work
class Com3 extends Parent {        
}

Ответ 12

У меня такая же проблема, просто измените с Navigator на {Navigator}

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

Ответ 13

Это сработало для меня:

import React, {Component} from 'react';

Ответ 14

Моя проблема заключалась в том, что я не экспортировал класс в конец файла...

Ответ 15

Я написал

React.component

вместо React.Component Это была моя проблема)) и искал это более получаса.

Ответ 16

Использование Babel (5.8) Я получаю ту же ошибку, если попытаюсь использовать выражение export default в сочетании с некоторым другим export:

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

Ответ 17

Неправильно для этого ответа, но для других с той же ошибкой моя смехотворная глупая ошибка может потенциально помочь.

Глупо, моя проблема была с использованием нотации функций, включая() после имени класса.

Убедитесь, что ваш синтаксис верен. И вы импортировали и экспортировали любые внешние компоненты/модули с правильными именами и путями.

Этот шаблон должен работать нормально, если у вас установлена ​​новая версия реакции:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass

Ответ 18

В моем случае я использовал:

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

который был неправильным, но правильным является:

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

также убедитесь, что есть √ React.Component
НЕ
ˣ React.Component или React.Components

Ответ 19

Я столкнулся с этой ошибкой при импорте компонента, например:

import React, { Components } from 'react';

вместо

import React, { Component } from 'react';

Ответ 20

Посмотрите, если у вас есть ошибка опечатки в вашем импорте или поколении, это может быть просто так.

Ответ 21

Если вы получаете эту ошибку и используете Browserify и browserify-shim (например, в задаче Grunt), возможно, вы столкнулись с тупым моментом, как я сделал, где вы непреднамеренно сказали browserify-shim рассматривать React как уже часть глобального пространства имен (например, загружаемого из CDN).

Если вы хотите, чтобы Browserify включал React как часть преобразования, а не отдельный файл, убедитесь, что строка "react": "global:React" не отображается в разделе "browserify-shim" в вашем файле packages.json.

Ответ 22

Это также может произойти, если вы использовали require вместо import в своем коде.

Ответ 23

Случилось также, когда я использовал это:

class App extends React.Component(){

}

Вместо правильного:

class App extends React.Component{

}

Обратите внимание: -() в первом, что является основной причиной этой проблемы

Ответ 24

Это также может произойти, если у вас есть рекурсивный импорт.

i.e Для компонента ComponentA для компонентов ComponentB и ComponentB требуется ComponentA.

Ответ 25

Для тех, кто использует react-native:

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

может выдать эту ошибку.

Принимая во внимание, что ссылки react напрямую, это более стабильный путь:

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

Ответ 26

В моем случае это было изменение React.Element на React.Component, которое исправило эту ошибку.

Ответ 27

Вот один ответ:

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

Ответ 28

В моем случае я исправил эту ошибку, изменив export default class yourComponent extends React.Component() {} чтобы export default class yourComponent extends React.Component {}. Да, удалите скобки () исправили ошибку.

Ответ 29

Другой случай, связанный с Expo/реакции-native с машинописным шрифтом: иногда, когда вы перекомпилируете файлы машинописного текста в середине упаковки, упаковщик реагирует на потерю.

Единственный способ снова запустить мое приложение - очистить кеш; если вы используете экспо-клик, вы можете нажать клавишу R (это верхний регистр 'R'); это восстановит весь пакет. Иногда переключение в режим разработки также помогает....

Ответ 30

В моем случае я использовал модуль npm с одноранговыми зависимостями. Ошибка была вызвана неправильной "внешней" конфигурацией в конфигурации модуля webpack:

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

Так должно быть:

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