Reputation: 233
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
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