React 15.0.2 ES6/Webpack/Babel超級表達式必須爲null或函數，而不是undefined

我正在使用React 15.0.2與ES6，Webpack和Babel。React 15.0.2 ES6/Webpack/Babel超級表達式必須爲null或函數，而不是undefined

RefreshLogin.jsx?ab52:4 Uncaught TypeError: Super expression must either be null or a function, not undefined

這是我的代碼：

RefreshLogin.jsx

import React from 'react-addons-linked-state-mixin'; 
import ReactMixin from 'react-mixin'; 
import UserStore from '../stores/UserStore'; 
import AuthService from '../services/AuthService'; 

export default class RefreshLogin extends React.Component { 

    constructor() { 
     super() 
     this.state = { 
      user: UserStore.email, 
      password: '' 
     }; 
    } 

    login(e) { 
     e.preventDefault(); 
     AuthService.login(this.state.user, this.state.password) 
      .catch(function(err) { 
      alert("There's an error logging in"); 
     }); 
    } 

    render() { 
     return (
      <div className="container"> 
       <div className="login jumbotron center-block"> 
        <h3>Session Expired</h3> 
        <form role="form"> 
         <div className="form-group"> 
           <label htmlFor="password">Password</label> 
           <input type="password" className="form-control" valueLink={this.linkState('password')} id="password" ref="password" placeholder="Password" /> 
         </div> 
         <button type="submit" className="btn btn-default" onClick={this.login.bind(this)}>Submit</button> 
        </form> 
       </div> 
      </div> 
     ); 
    } 
} 

ReactMixin(RefreshLogin.prototype, React.addons.LinkedStateMixin);

transpiling我ES6代碼通天塔之後，我跑我的應用程序時，趕上這個錯誤webpack.config.js

var path = require('path'); 
var webpack = require('webpack'); 

module.exports = { 
    entry: [ 
    './src/index.jsx' 
    ], 
    debug: true, 
    devtool: 'eval-source-map', 
    output: { 
    path: path.join(__dirname, 'build'), 
    filename: 'build.js', 
    publicPath: '/build/' 
    }, 
    resolve: { 
    extensions: ['', '.js', '.jsx'] 
    }, 
    module: { 
    loaders: [{ 
     test: /.jsx?$/, 
     loader: 'babel', 
     query: { 
      presets: ['react', 'es2015', 'stage-0'] 
     } 
    }] 
    } 
};

我用下面的依賴關係和版本：

陣營15.0.2
的WebPack 1.13.0
通天6.5.2

任何想法？

來源

2016-05-03 Yomansk8

您的進口聲明不正確。你正在導入React而不是react這麼延伸React.Component這就是undefined，會拋出這個錯誤。

變化import React from 'react-addons-linked-state-mixin'

到import React from 'react'

要使用的mixin，只需導入自身。從文檔：https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-valuelink

import LinkedStateMixin from 'react-addons-linked-state-mixin'

來源

2016-05-03 16:44:16 azium

感謝您的快速響應！我試過這個，我的第一個錯誤已經消失了，但LinkedStateMixin導入不起作用：無法讀取undefined的屬性'LinkedStateMixin' – Yomansk8

你在做'React.addons.LinkedStateMixin'嗎？ 'React.addons'是未定義的，現在你直接導入它直接使用它'ReactMixin（RefreshLogin.prototype，LinkedStateMixin）' – azium

另外..注意該文檔頁面上的大的棄用警告！ – azium

React 15.0.2 ES6/Webpack/Babel超級表達式必須爲null或函數，而不是undefined

回答

相關問題