responsejs, выдавая ошибку Uncaught TypeError: Супер-выражение должно быть либо нулевым, либо функцией, а не неопределенным

Я использую реагирование.

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

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

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

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

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

ОБНОВЛЕНИЕ: после трех дней горения в адском огне я обнаружил, что не использую последнюю версию реакции.

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

sudo npm install -g react@0.13.2

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

npm install react@0.13.2

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

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

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

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

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

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

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

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

class HelloMessage extends React.Component

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

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

Круговые зависимости

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

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

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

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

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

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

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

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

Я испытал это, когда пропустил оператор экспорта для класса JSX.

Например:

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

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

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

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

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

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

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

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

Я изменил это на

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

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

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

import {Comonent} from 'react';

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

Удачи!!

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

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

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

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

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

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

import React, {Component} from 'react';

Webpack 4 чанков и хешей с увеличением с помощью TerserPlugin

Это может произойти, когда Webpack использует куски и хэши с минификацией и расклиниванием через TerserPlugin (в настоящее время на версии 1.2.3). В моем случае ошибка сузилась до плагинов Terser моего vendors.[contenthash].jsпакета, который содержит мой node_modules. Все работало, когда не использовались хэши.

Решением было исключить расслоение в опциях uglification:

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

Больше информации

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

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

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

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

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

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

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Мои условия

• Create-React-приложения
• React-скрипты v3.2
• Froala Rich Text Editor v3.1
• Режим разработки работал нормально
• Сборка производства была нарушена с ошибкой, указанной в вопросе

Решение моей проблемы

Понизьте Froala до версии 3.0.

Что-то в v3.1 сломало процесс сборки приложения Create React.

Обновление: используйте реагирующие скрипты v3.3

Мы обнаружили, что существует проблема между React Scripts 3.2 и Froala 3.1.

Обновление React Scripts v3.3 позволило нам перейти на Froala 3.1.

Я написала

React.component

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

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

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

Это может быть сторонний пакет, вызывающий это. В нашем случае это была реакция-ослепление . У нас есть настройки, аналогичные настройкам @steine ​​( см. Ответ выше ).

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

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

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

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

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

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

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

import React, { Components } from 'react';

вместо того

import React, { Component } from 'react';

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

Измените import React from 'react-domна import React, {Component} from 'react'
И измените class Classname extends React.Componentна class Classname extends Component
Если вы используете последнюю версию React (16.8.6 на данный момент) .

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

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

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

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

class App extends React.Component(){

}

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

class App extends React.Component{

}

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

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

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

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

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

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

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