Yomansk8
Yomansk8

Reputation: 233

React 15.0.2 ES6/Webpack/Babel Super expression must either be null or a function, not undefined

I am using React 15.0.2 with ES6, Webpack and Babel.

After transpiling my ES6 code with Babel, I catch this error when running my app :

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

This is my code :

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

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']
        }
    }]
  }
};

I'm using the following dependancies and versions :

Any idea ?

Upvotes: 1

Views: 711

Answers (1)

azium
azium

Reputation: 20614

Your import statement is not correct. You're importing React not from react so extending React.Component which is undefined, will throw this error.

Change import React from 'react-addons-linked-state-mixin'

to import React from 'react'

To use the mixin, just import that on its own. From the docs: https://facebook.github.io/react/docs/two-way-binding-helpers.html#reactlink-without-valuelink

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

Upvotes: 2

Related Questions