Ik gebruik reactjs.
Als ik de onderstaande code uitvoer, zegt de browser:
Uncaught TypeError: Super-expressie moet null of een functie zijn, niet ongedefinieerd
Alle hints over wat er mis is, worden op prijs gesteld.
Eerst de regel die is gebruikt om de code te compileren:
browserify -t reactify -t babelify examples/temp.jsx -o examples/public/app.js
En de code:
var React = require('react');
class HelloMessage extends React.Component {
render() {
return <div>Hello </div>;
}
}
UPDATE:
Na drie dagen in het hellevuur te hebben gebrand op dit probleem, ontdekte ik dat ik niet de nieuwste versie van react gebruikte.
Globaal installeren:
sudo npm install -g [email protected]
lokaal installeren:
npm install [email protected]
zorg ervoor dat de browser ook de juiste versie gebruikt:
<script type="text/javascript" src="react-0.13.2.js"></script>
Ik hoop dat dit iemand anders drie dagen kostbaar leven bespaart.
Antwoord 1, autoriteit 100%
Klassenamen
Ten eerste, als u zeker weet dat u uitbreidt vanuit de correct benoemde klasse, b.v. React.Component, niet React.component of React.createComponent, het kan zijn dat je je React-versie moet upgraden. Zie de antwoorden hieronder voor meer informatie over de lessen waaruit je kunt verlengen.
Upgrade Reageren
React ondersteunt alleen klassen in ES6-stijl sinds versie 0.13.0 (zie hun officiële blogpost over de ondersteuningsintroductie hier.
Voordien, bij gebruik van:
class HelloMessage extends React.Component
je probeerde ES6-sleutelwoorden (extends) te gebruiken om een klasse te subklassen die niet was gedefinieerd met ES6 Class. Dit was waarschijnlijk de reden waarom je vreemd gedrag tegenkwam met super-definities enz.
Dus, ja, TL;DR– update naar React v0.13.x.
Circulaire afhankelijkheden
Dit kan ook voorkomen als je een circulaire importstructuur hebt. De ene module importeert de andere en andersom. In dit geval hoeft u alleen uw code te refactoren om dit te voorkomen. Meer info
Antwoord 2, autoriteit 38%
Dit betekent dat je iets wilt subklassen, dat Classzou moeten zijn, maar undefinedis. De redenen kunnen zijn:
- typefout in
Class extends ...uit, dus je breidt ongedefinieerde variabele uit - typefout in
import ... from, dus je importeertundefineduit module - module waarnaar wordt verwezen bevat niet de waarde die u wilt importeren (bijv. verouderde module – geval met React), dus u importeert niet-bestaande waarde (
undefined) - typefout in module
export ...-instructie waarnaar wordt verwezen, dus het exporteert niet-gedefinieerde variabele - module waarnaar wordt verwezen, ontbreekt een
export-instructie, dus het exporteert alleenundefined
Antwoord 3, autoriteit 27%
Het kan ook worden veroorzaakt door een typefout, dus in plaats van componentmet hoofdletter C, heb je componentmet een lagere c, bijvoorbeeld:
React.component //wrong.
React.Component //correct.
Opmerking:
De oorzaak van deze fout kan zijn dat er Reactis en we denken dat wat daarna komt automatisch een react-methode of eigenschap moet zijn die begint met een kleine letter, maar in feite is het een andere Class(component) die met een hoofdletter moet beginnen.
Antwoord 4, autoriteit 9%
In mijn geval, met react-native, was de fout dat ik had
import React, {
AppRegistry,
Component,
Text,
View,
TouchableHighlight
} from 'react-native';
in plaats van
import React, { Component } from 'react';
import {
AppRegistry,
StyleSheet,
Text,
View,
Image,
AsyncStorage
} from 'react-native';
Antwoord 5, autoriteit 5%
Ik heb deze fout gezien wanneer je een circulaire afhankelijkheid hebt.
class A extends B {}
class B extends C {}
class C extends A {}
Antwoord 6, autoriteit 5%
Je kunt dit ook krijgen als je probeert React.componentuit te voeren met een foutieve ()in je klassedefinitie.
export default class MyComponent extends React.Component() {}
^^ REMOVE
Wat ik soms slaag als ik van een staatloze functionele component naar een klasse converteer.
Antwoord 7, autoriteit 5%
Ik heb dit ondervonden toen ik een exportstatement voor de JSX-klasse miste.
Bijvoorbeeld:
class MyComponent extends React.Component {
}
export default MyComponent // <- add me
Antwoord 8, autoriteit 3%
Voor alle andere personen die dit probleem kunnen ontwikkelen. Je zou ook kunnen controleren of de componentmethode in React.componenteen hoofdletter heeft. Ik had hetzelfde probleem en de oorzaak was dat ik schreef:
class Main extends React.component {
//class definition
}
Ik heb het gewijzigd in
class Main extends React.component {
//class definition
}
en alles werkte goed
Antwoord 9, autoriteit 2%
Webpack 4 Chunks en Hashes met Uglification door TerserPlugin
Dit kan gebeuren wanneer Webpack chunks en hashes gebruikt met minificatie en unglificatie via TerserPlugin (momenteel in versie 1.2.3). In mijn geval werd de fout beperkt tot de verslechtering door de Terser-plug-in van mijn vendors.[contenthash].js-bundel die mijn node_modulesbevat. Alles werkte zonder hashes te gebruiken.
Oplossing was om de bundel uit te sluiten in de uglification-opties:
optimization: {
minimizer: [
new TerserPlugin({
chunkFilter: (chunk) => {
// Exclude uglification for the `vendors` chunk
if (chunk.name === 'vendors') {
return false;
}
return true;
},
}),
],
}
Antwoord 10, autoriteit 2%
Ik kreeg dit toen ik een typfout had in mijn import:
import {Comonent} from 'react';
Antwoord 11
Controleer of de klassen die u uitbreidt daadwerkelijk bestaan, er worden weinig React-methoden afgeschreven. Het kan ook een typfout zijn 'React.Components'in plaats van 'React.Component'
Veel succes!!
12
Ik heb hetzelfde probleem, verander gewoon van Navigatornaar {Navigator}
import Navigator from 'react-native-deprecated-custom-components'
// to
import {Navigator} from 'react-native-deprecated-custom-components'
13
Dit werkte voor mij:
import React, {Component} from 'react';
14
Niet correct voor dit antwoord, maar voor anderen met dezelfde fout kan mijn belachelijk domme fout mogelijk helpen.
Stom, mijn probleem was met behulp van functie-notatie door () op te nemen na de klasnaam .
Zorg ervoor dat uw syntaxis correct is. En je hebt geïmporteerd en amp; Externe componenten / modules geëxporteerd met de juiste namen en paden.
Deze sjabloon zou goed moeten werken als u een nieuwe versie van react hebt geïnstalleerd:
import React, { Component } from 'react'
class ExampleClass extends Component {
render(){
return(
<div>
</div>
)
}
}
export default ExampleClass
15
Mijn voorwaarden
- CREATE-ReACT-app
- reageer-scripts v3.2
- froala rijke teksteditor V3.1
- Ontwikkelingsmodus werkte prima
- De productie-build werd verbroken met de fout vermeld in de vraag
oplossing voor mijn probleem
Downgrade Froala naar V3.0.
Iets in V3.1 Blokken ons Create React-app-build-proces.
Update: gebruik reageer scripts v3.3
We ontdekten dat er een kwestie was tussen reageer scripts 3.2 en Froala 3.1.
Updaten om scripts V3.3 bij te reageren om ons te upgraden naar Froala 3.1.
16
ik heb geschreven
React.component
In plaats van React.component
Dat was mijn probleem))
en was op zoek naar dit meer dan een half uur.
17
In mijn geval gebruik ik:
class Root extends React.Component() {
// THIS IS WORNG
// After React.Component () <- WRONG!!
}
wat fout was maar correct is:
class Root extends React.Component {
// THIS IS CORRECT
// That -> '()' after React.Component was typo
}
zorg er ook voor dat er
. is
√ React.component
NIET
ˣ React.componentof React.Components
Antwoord 18
Ik heb deze fout ondervonden tijdens het importeren van componenten zoals:
import React, { Components } from 'react';
in plaats van
import React, { Component } from 'react';
Antwoord 19
Het kan zijn dat een pakket van derden dit veroorzaakt.
In ons geval was het react-dazzle.
We hebben vergelijkbare instellingen als @steine (zie dit antwoord hierboven).
Om het problematische pakket te vinden, heb ik de webpack-build lokaal uitgevoerd met productiemodus en kon ik het problematische pakket dus vinden in de stacktracering.
Dus voor ons ditbood de oplossing en kon ik de lelijkheid behouden.
Antwoord 20
Verander import React from 'react-domin import React, {Component} from 'react'
En verander class Classname extends React.Componentuit in class Classname extends Component
Als je de nieuwste versie van React(16.8.6 vanaf nu)gebruikt.
Antwoord 21
Bij gebruik van Babel (5.8) krijg ik dezelfde foutmelding als ik de uitdrukking export defaultprobeer te gebruiken in combinatie met een andere export:
export const foo = "foo"
export const bar = "bar"
export default function baz() {}
Antwoord 22
Is mij ook overkomen toen ik dit gebruikte:
class App extends React.Component(){
}
In plaats van de juiste :
class App extends React.Component{
}
Opmerking:- () in de eerste die de hoofdoorzaak van dit probleem is
Antwoord 23
Hier is één antwoord:
import React, { Component } from 'react'; // NOT 'react-dom'
Antwoord 24
In mijn geval heb ik deze fout verholpen door export default class yourComponent extends React.Component() {}te wijzigen in export default class yourComponent extends React.Component {}.
Ja verwijder de haakjes ()de fout is verholpen.
Antwoord 25
Kijk of je een typfout hebt in je import of het genereren van je klas, het kan gewoon dat zijn.
Antwoord 26
Ik heb deze fout zien optreden als gevolg van ‘opmerkingen’ in de bundel die door webpack is gegenereerd. Het gebruik van ‘pathinfo’= true in webpack.config.js kan dit probleem veroorzaken:
webpack.config.js
module.exports = {
output: {
pathinfo: true,
}
}
‘pathinfo’ is standaard true in ontwikkeling en false in productie
modus. https://webpack.js.org/configuration/output/#outputpathinfo
Probeer het instellen van deze waarde op false om het probleem op te lossen.
Dit kan ook gebeuren als u geen gebruik maakt van een plugin om de opmerkingen van de build-uitgang te strippen. Probeer het gebruik van UglifyJs (https://www.npmjs.com/ pakket / uglifyjs-webpack-plugin / v / 1.3.0 ):
webpack.config.js
const UglifyJsPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
...
optimization: {
minimizer: [new UglifyJsPlugin(
new UglifyJsPlugin({
uglifyOptions: {
output: {
comments: false
}
}
}),
)],
}
}
27
Als u deze foutmelding ontvangt en zijn met behulp Browserify en browserify-shim (zoals in een Grunt taak), u zou kunnen hebben ervaren een domme moment als ik deed, waar u per ongeluk verteld browserify-shimte behandelen reageren zoals reeds in de algemene naamruimte (bijvoorbeeld geladen uit een CDN).
Als u wilt Browserify opnemen Reageer als onderdeel van de transformatie, en niet een apart bestand, zorg ervoor dat de lijn "react": "global:React"wordt niet weergegeven in het "browserify-shim"gedeelte in de packages.jsonfile.
28
Dit kan ook gebeuren als je had gebruikt requirein plaats van importin uw code.
29
Voor degenen met react-native:
import React, {
Component,
StyleSheet,
} from 'react-native';
kan deze fout veroorzaken.
Terwijl rechtstreeks verwijzen naar reactde stabielere manier is:
import React, { Component } from 'react';
import { StyleSheet } from 'react-native';