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

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