reactjs, що дає помилку Uncaught TypeError: Супер вираження повинно бути або нульовим, або функцією, а не визначеним

Я використовую reactjs.

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

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. Дивіться відповіді нижче, щоб отримати докладнішу інформацію про класи, з яких можна продовжити.

Модернізація реагує

React підтримує лише класи в стилі ES6 з версії 0.13.0 (див. Офіційну публікацію в блозі про вступ до служби підтримки тут .

Перед цим під час використання:

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)
• typo у 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.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. Все працювало, коли не використовували хеші.

Рішенням було виключити розшарування у варіантах зменшення:

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'

Неправильно для цієї відповіді, але для інших із такою ж помилкою моя сміховинна помилка могла б допомогти.

Тупо, що в моїй проблемі було використання позначень функції, включивши () слідом за назвою класу .

Переконайтесь, що ваш синтаксис правильний. І ви імпортували та експортували будь-які зовнішні компоненти / модулі з правильними назвами та шляхами.

Цей шаблон повинен добре працювати, якщо у вас встановлена ​​нова версія react:

import React, { Component } from 'react'

class ExampleClass extends Component {

    render(){
        return(
            <div>

            </div>
        )
    }
}

export default ExampleClass 

Мої умови

• Create-React-App
• Сценарії реагування v3.2
• Редактор текстових файлів Froala 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).

Якщо ви хочете, щоб Browrify включив 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.