web-dev-qa-db-fra.com

Erreur de réaction 0.14.2 - La super expression doit être nulle ou une fonction

Après la mise à jour de 0.13.2 à 0.14.2, j'obtiens cette erreur:

Uncaught TypeError: Super expression must either be null or a function, not object

Il y a plusieursquestions à ce sujet déjà. L’erreur la plus courante est une faute d’orthographe dans React.component (sans C majuscule) . L’autre consiste à utiliser des classes ES6 avec des versions <0.13.

Mais j’utilisais déjà avec succès les classes ES6 avec React 0.13.x, et j’utilise le C majuscule partout, et la journalisation de React.Component semble donner un résultat approprié (fonction ReactComponent (...))

Après quelques recherches, j’ai fait ces 3 cas de test dont 2 jettent l’exacte erreur identique (sans que je comprenne pourquoi) et un non. Apparemment suggérant que l'ordre dans lequel les classes se produisent est un problème?

TEST 1 (erreur renvoyée)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
var BaseComponent = require('./BaseComponent');

class Test extends BaseComponent {
    render() { return <div>Test worked</div>; }
}
ReactDOM.render(<Test />, document.getElementById('test'));

//BaseComponent.jsx
var React = require('react');
console.log(React.Component); // <--- logs "function ReactComponent(...)" !!
export default class BaseComponent extends React.Component { }

TEST 2 (place BaseComponent dans Test.jsx, erreur encore)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
class BaseComponent extends React.Component { }
ReactDOM.render(<Test />, document.getElementById('test'));

TEST 3 (placez BaseComponent au-dessus de la définition de la classe Test, pas d'erreur!?)

//Test.jsx
var React = require('react');
var ReactDOM = require('react-dom');
class BaseComponent extends React.Component { }
class Test extends BaseComponent { render() { return <div>Test worked</div>;     } }
ReactDOM.render(<Test />, document.getElementById('test'));

Je ne suis même plus sûr que cela résoudra mon problème actuel. Mais comprendre ce qui se passe dans ces cas de test peut m'aider à trouver la solution.

J'utilise webpack avec babel pour compiler un paquet.

update Changement 

export default class BaseComponent extends React.Component { }

À

class BaseComponent extends React.Component { }
module.exports = BaseComponent;

également supprimé l'erreur! Ce qui signifie que je vais refactoriser cela maintenant, mais cela ne résout pas le problème, car export default class devrait fonctionner

javascriptreactjsecmascript-6webpackbabeljs
11
Flion

J'ai trouvé la solution. C'est à cause d'un changement de babel, que j'ai également mis à jour. Si tu utilises:

export default class BaseComponent

Vous devez également utiliser import au lieu de require, donc:

import BaseComponent from './BaseComponent'

au lieu de 

var BaseComponent = require('./BaseComponent')

Utilisé cette regex pour remplacer cela partout: Remplacer: var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); Avec: import $1 from '$2';

5
Flion

J'ai eu un problème similaire il y a quelque temps, en supprimant le dossier node_modules et en réinstallant tout ce qui fonctionnait pour moi, vous pourriez peut-être essayer?

0
luanped