Reagire 0.14.2 errore - Super espressione deve essere o nullo o una funzione

Question

Dopo aver aggiornato da 0.13.2 a 0.14.2 sto ottenendo questo errore:

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

ci sono severalquestions su questo già. L'errore più comune è l'ortografia di React.component (senza la C maiuscola). L'altro sta tentando di utilizzare le classi ES6 con le versioni < 0,13.

Ma ero già con successo utilizzando le classi ES6 con Reagire 0.13.x, e io uso il capitale C in tutto il mondo, e la registrazione React.Component sembra dare un risultato appropriato (funzione ReactComponent (...))

Dopo alcune ricerche ho fatto questi 3 casi di test di cui 2 lanciano lo stesso errore (senza che io capisca perché) e uno no. Suggerire apparentemente l'ordine in cui si verificano le lezioni è un problema?

TEST 1 (tiri errore)

//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 (mettere sotto BaseComponent in Test.jsx, ancora errore)

//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 (messo sopra BaseComponent Definizione della classe di test, nessun errore !?)

//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')); 

Non sono nemmeno sicuro che questo risolverà il mio problema attuale. Ma capire cosa sta succedendo in questi casi può aiutarmi ad arrivare alla soluzione.

Sto usando webpack con babel per compilare un pacchetto.

aggiornamento Modifica

export default class BaseComponent extends React.Component { } 

Per

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

anche rimosso l'errore! Il che significa che ho intenzione di refactoring che ora, ma non risolve il problema, perché export default class dovrebbe funzionare

Answer 1

Ho trovato la soluzione. È a causa di un cambiamento in Babele, che ho anche aggiornato. Se si utilizza:

export default class BaseComponent 

È inoltre necessario utilizzare import invece di require, quindi:

import BaseComponent from './BaseComponent' 

invece di

var BaseComponent = require('./BaseComponent') 

Usato questo regex per sostituire che dappertutto: sostituire : var ([\w-_]+?) = require\('([\w-_.\/]+?)'\); con: import $1 from '$2';

Answer 2

ho avuto un problema simile qualche tempo fa, l'eliminazione della cartella node_modules e reinstallare tutto ha funzionato per me, Forse potresti provare quello?