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