title: React Webpack - Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_4_
body: <p>My particular error is when submitting the form so running <code>login</code> I then see the below error, I have also included the actions/reducers and everything is included. I believe its something to do with upgrading to <code>react-router-dom</code>, but honestly I'm pretty baffed by this :/</p>
  
  <p><code>store_configureStore</code> is the name of my store and I'm sure its from my exported store file called via <code>import configureStore from './store/configureStore';</code></p>
  
  <p><code>Uncaught TypeError: __WEBPACK_IMPORTED_MODULE_4__store_configureStore__.a.dispatch is not a function
  </code></p>
  
  <p><strong>Error</strong><a href="https://i.stack.imgur.com/lPf91.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/lPf91.png" alt="enter image description here"></a></p>
  
  <p><strong>Action</strong></p>
  
  <p><strong>Reducer</strong></p>
  
  <pre><code>// There are three possible states for our login
  // process and we need actions for each of them
  export const LOGIN_CHECK = 'LOGIN_CHECK'
  export const LOGIN_REQUEST = 'LOGIN_REQUEST'
  export const LOGGED_IN = 'LOGGED_IN'
  export const LOGIN_FAILURE = 'LOGIN_FAILURE'
  export const UN_AUTHED = 'UN_AUTHED'
  
  
  function receiveLogin(user) {
      return {
          type: LOGGED_IN,
          isFetching: false,
          isAuthenticated: true
      }
  }
  
  export function submitLogin (creds) {
      if(creds.email !== "" &amp;&amp; creds.pw !== ""){
          localStorage.setItem('LOGGED_IN', true);
          return receiveLogin();
      }
  }
  </code></pre>
  
  <p><strong>Component</strong></p>
  
  <pre><code>import React from 'react';
  import { NavLink } from 'react-router-dom'
  import * as authAction from '../../actions/auth';
  import Logo from '../shared/logo';
  import store from '../../store/configureStore';
  import loggedOut from './_home.css';
  
  class SignIn extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        email: 'as',
        pw: 'as'
      };
  
      // Bind callback methods to make `this` the correct context.
      this.logIn = this.logIn.bind(this);
      this.changed = this.changed.bind(this);
    }
  
    logIn = ( e ) =&gt; {
      e.preventDefault ();
      store.dispatch(authAction.submitLogin(this.state));
    };
  
    render(){
      return (
        &lt;div className={loggedOut.home}&gt;
          &lt;Logo /&gt;
          &lt;h2&gt;Please sign in to your account&lt;/h2&gt;
          &lt;form role="form" onSubmit={this.logIn}&gt;
            &lt;input type="text" name="email" defaultValue={this.state.email} onChange={this.changed} placeholder="Enter email address"/&gt;
            &lt;input type="password" name="pw" defaultValue={this.state.pw} onChange={this.changed} placeholder="Password"/&gt;
            &lt;button&gt;Sign In&lt;/button&gt;
          &lt;/form&gt;
          &lt;div className={loggedOut.extraDetails}&gt;
            &lt;NavLink to="/signup"&gt;Don't have an account yet?&lt;/NavLink&gt;
            &lt;NavLink to="/skip" className={loggedOut.extraDetailsRight}&gt;Skip&lt;/NavLink&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SignIn;
  </code></pre>
  
  <p><strong>Action</strong></p>
  
  <pre><code>import { List, Map } from 'immutable';
  
  const initialState = {
      loggedIn: false,
      shouldRedirect: false,
      errorMessage: null
  };
  
  export default function (state = initialState, action) {
      switch (action.type) {
          case 'LOGIN_REQUEST':
              return Object.assign({}, state, { loggedIn: true, shouldRedirect: true });
          case 'LOGGED_IN':
              return Object.assign({}, state, { loggedIn: true, shouldRedirect: true });
          case 'LOGIN_FAILED':
              return Object.assign({}, state, { loggedIn: false, shouldRedirect: false, errorMessage: action.error.message })
      }
      return state
  }
  </code></pre>
  
  <p><strong>ConfigStore</strong></p>
  
  <pre><code>import { createStore, applyMiddleware, compose } from 'redux'
  import { createLogger } from 'redux-logger'
  import { routerMiddleware } from 'react-router-redux'
  import reducers from '../reducers';
  
  const configureStore = function (history, preloadedState = {}) {
    // Build the middleware for intercepting and dispatching navigation actions
    const middlewareHistory = routerMiddleware(history);
  
    const store = createStore(
      reducers,
      preloadedState,
      compose(
        applyMiddleware(createLogger(), middlewareHistory)
      )
    );
  
    if (module.hot) {
      // Enable Webpack hot module replacement for reducers
      module.hot.accept('../reducers', () =&gt; {
        const nextReducer = require('../reducers').default;
  
        store.replaceReducer(nextReducer);
      });
    }
  
    return store;
  };
  
  export default configureStore;
  </code></pre>