web-dev-qa-db-fra.com

TypeError: La super expression doit être nulle ou une fonction, non indéfinie avec Babeljs

J'essaie actuellement de faire l'héritage de plusieurs fichiers dans ES6, avec node.JS et Babel (j'utilise Babel pour convertir le code d'ES6 en ES5 car Node don't implement ES6 en ce moment) J'utilise l'import/export pour "lier" les différents fichiers.

En fait, j'ai: classe parent (fichier 1)

export class Point
{
    constructor(x, y)
    {
        this.x = x;
        this.y = y;
    }

    toString() {
        return '(' + this.x + ', ' + this.y + ')';
    }
}

Et: classe enfant (fichier 2)

import Point from './pointES5'

export class ColorPoint extends Point
{
    constructor(x, y, color)
    {
        super(x, y);
        this.color = color;
    }

    toString() {
        return super.toString() + ' in ' + this.color;
    }
}

Et le principal Principal (Fichier 3)

import Point from './pointES5'
import ColorPoint from './colorpointES5'

var m_point = new Point();
var m_colorpoint = new ColorPoint();

console.log(m_point.toString());
console.log(m_colorpoint.toString());

Je fais ça pour tester les appels aux méthodes toString (), du parent et de l'enfant.
Alors, j'utilise Babel pour convertir le code d'ES6 en ES5 et j'exécute chaque partie séparément pour tester si ça va ou non.
- Le point (le parent) est bon et s'exécute sans erreur.
- ColorPoint (l'Enfant) ne court pas complètement et lance:

TypeError: la super expression doit être nulle ou une fonction, non indéfinie

La première ligne du StackTrace est:

function _inherits (subClass, superClass) {if (typeof superClass! == 'function' && superClass! == null) {throw new TypeError ('Super expression doit être null ou une fonction, pas' + typeof superClass); } subClass.prototype = Object.create (superClass && superClass.prototype, {constructeur: {valeur: subClass, énumérable: faux, inscriptible: vrai, configurable: vrai}}); if (superClass) Object.setPrototypeOf? Object.setPrototypeOf (subClass, superClass): subClass .proto = superClass; } (Il provient du code converti ES5 (Babelified), et je peux le poster entièrement si nécessaire).

C'est frustrant car ce code est très simple ... Mais je ne vois pas ce qui cause l'erreur.

J'essaie différentes versions de Babel (5, 5.8, 6) mais il n'y a pas de différences ...

Qu'est ce que j'ai mal fait ?

PS: j'ai oublié de dire: cela FONCTIONNE PARFAITEMENT lorsque je fais cela dans un seul fichier. Mais c'est vraiment important pour moi de n'avoir qu'une seule classe par fichier ...

javascriptnode.jsinheritancebabeljs
16
Aethyn

Votre exportation ne correspond pas à votre importation:

export class Point
// and
import Point from './pointES5'

Vous exportez un symbole nommé mais vous importez la valeur par défaut, vous obtiendrez donc le mauvais objet en tant que Point dans votre deuxième fichier.

Vous pouvez soit utiliser:

export default class Point

dans le fichier de première classe ou

import {Point} from './pointES5';

dans le deuxième fichier pour récupérer la bonne référence. Si vous optez pour la disposition à classe unique par fichier, je suggère la première. Vous n'aurez généralement qu'une seule classe en cours d'exportation, il est donc logique de l'avoir comme valeur par défaut.

Ce que vous avez maintenant est l'équivalent de:

// in Point
module.exports = {
  Point: Point
};

// in ColorPoint
var Point = require('./pointES5'); // will point to *the whole object*

class SubPoint extends Point
42
ssube

Cela peut également être un problème dans votre configuration de webpack, si vous utilisez webpack en tant que bundler. Ou comment vous uglifiez votre code. par exemple, comment j'ai résolu mon problème spécifique avec le package NPM react-draft-wysiwyg et le plugin wepback uglifyjs- plugin webpack .

Ce qui a fonctionné pour moi ici était de définir l'option inline pour l'option compress sur false car par défaut, c'est true pour glifyOptions.

optimization:{
  minimizer: [new UglifyJsPlugin({
  uglifyOptions: {
    compress: {
      inline: 1, // this right here
      // keep_fnames: true
    },
    mangle: {
      // keep_fnames: true
    }
  }
})]
}
1
Teebo