Babel 6 对父级进行超级构造函数调用抛出异常

Question

我升级到 babel 版本 6，我使用 "es2015", "react", "stage-0" 作为预设。我正在使用 es6 语法处理 react。

升级前一切正常。升级后，我开始在对父构造函数进行超级调用的地方出现异常。

例如以下 class:

class childForm extends ParentForm {
    constructor(props, context) {
        console.log("this get printed.");
        super(props, context);
        console.log("this is not printed");
    }
    ...
}

class ParentForm extends React.Component {
    constructor(props, context) {
        console.log("this is printed");
        super(props, context);
        console.log("this is printed too");
    }

    ...
}



class AnotherComponent extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
        myService.findById(this.props.params.id).then(result => {
             this.setState({result: result});
        }).catch(err => {
            /**** Error is catched here ******/
            console.log(err);
        });
    }

    render(){
         return <div>{this.state.result && <ChildForm/>}</div>
    }
}

我在控制台上收到以下错误：

TypeError: (0 , _typeof3.default) is not a function(…)
ReactCompositeComponent.js?cd59:443 Uncaught (in promise) TypeError: Cannot read property 'context' of null(…)

抛出错误的React函数是以下函数。在 ReactCompositeComponentMixin.updateComponent

处引发的异常

  updateComponent: function (transaction, prevParentElement, nextParentElement, prevUnmaskedContext, nextUnmaskedContext) {
    var inst = this._instance;

    var nextContext = this._context === nextUnmaskedContext ? inst.context : this._processContext(nextUnmaskedContext);
    ....

如果我将父 class 的所有功能传递给子 class，它将按预期工作。有人遇到过类似的问题吗？

还有可能使用一些库或插件来获得更好的异常消息吗？

Answer 1

这可能是 class 编译的问题。如果在 superclass.

之前声明 child class，目前看起来它可能会导致错误

在 babeljs.io 上尝试此操作当前会导致错误：

class A extends B {
    constructor(x) {
        super(x);
    }
}

class B {
    constructor(x) {
        console.log(x);
    }
}

new A('a');

尝试更改 class 定义的顺序：

class ParentForm extends React.Component {
    constructor(props, context) {
        super(props, context);
    }
    ...
}

class childForm extends ParentForm {
    constructor(props, context) {
        super(props, context);
    }
    ...
}

编辑： 似乎 Chrome 的 classes 的行为几乎相同，Uncaught ReferenceError: B is not defined(…) 在声明时抛出。

Answer 2

安装babel-runtime@6.3.19应该可以解决问题。检查问题 https://phabricator.babeljs.io/T6644

Babel 6 对父级进行超级构造函数调用抛出异常

Babel 6 making super constructor call to parent throws exception

reactjs

webpack

babeljs