Why isn't ReactRedux defined?

Question

I am using webpack and babel. I have a file like this:

import React from 'react';
import ReactRedux from 'react-redux';

var Layout = React.createClass({
  render(){
    return (<div>Markup</div>);
  }
});


function mapStateToProps(state, action) {
  return state;
}

export default ReactRedux.connect(mapStateToProps)(Layout);

For some reason when I run webpack, after compiling, it runs with this error: Cannot read property 'connect' of undefined. Not sure why it would fail at getting ReactRedux object. My webpack config is like this:

var compiler = webpack({
    entry: "./dist/runner.js",
    module: {
      loaders: [
        {
          test: /\.jsx?$/,
          exclude: /(node_modules|bower_components)/,
          loader: 'babel', // 'babel-loader' is also a legal name to reference
          query: {
            presets: ['es2015', 'react']
          }
        }
      ]
    },
    devtool: 'source-map',
    output: {
      filename: "public/dist/bundle.js"
    }
});

Answer 1

This is because the react-redux package doesn't have a default export on the module. You can access the connect function manually like:

import { connect } from 'react-redux';

...

export default connect(mapStateToProps)(Layout);