title: "Cannot read property 'type' of undefined" in redux store for action defined in external package
body: <p>As part of my ongoing project to learn React (I'm natively an ASP.NET guy) I've hit this issue. I have a suite of React apps in which I want to use some common UI elements, so I've attempted to break these out into a separate npm package. For the shared components themselves this has worked fine.</p>
  <p>However, some of these components depend on redux actions to operate, so I've tried to bundle these actions and a reducer function into the external package. Here's a simplified version of my <code>actions\index.js</code>:</p>
  <pre><code>export const SNACKBAR_MESSAGE = &quot;SNACKBAR_MESSAGE&quot;;
  export const SNACKBAR_HIDE = &quot;SNACKBAR_HIDE&quot;;
  
  export function showSnackBarMessage(message) {
      console.log('hit 1');
      return (dispatch, getState) =&gt; {
          console.log('hit 2');
          dispatch(hideSnackBar());
          dispatch({
              type: SNACKBAR_MESSAGE,
              message: message
          });
      }
  }
  
  export const hideSnackBar = () =&gt; {
      type: SNACKBAR_HIDE
  };
  </code></pre>
  <p>And this is <code>reducer\index.js</code>:</p>
  <pre><code>import { 
      SNACKBAR_MESSAGE,
      SNACKBAR_HIDE
  } from &quot;../actions&quot;;
  
  const initialState = {
      snackBarMessage: null,
      snackBarVisible: false
  };
  
  export default function UiReducer(state = initialState, action) {
      switch(action.type) {
          case SNACKBAR_MESSAGE:
              return Object.assign({}, state, { 
                  snackBarMessage: action.message,
                  snackBarVisible: true
              });
          case SNACKBAR_HIDE:
              return Object.assign({}, state, { 
                  snackBarMessages: '',
                  snackBarVisible: false
              });
          default:
              return state;
      }
  }
  </code></pre>
  <p>This is the same code that worked fine when part of the original project. These are exported by my package's entry point file like this:</p>
  <pre><code>// Reducer
  export { default as uiReducer } from './reducer';
  
  // Actions
  export { showSnackBarMessage as uiShowPrompt } from './actions';
  export { hideSnackBar as uiHidePrompt } from './actions';
  </code></pre>
  <p>Then in my consuming project, my default reducer looks like this:</p>
  <pre><code>import { routerReducer } from 'react-router-redux';
  import { combineReducers } from 'redux';
  import { uiReducer } from 'my-custom-ui-package';
  // Import local reducers
  
  const reducer = combineReducers(
    {
      // Some local reducers
      ui: uiReducer
    }
  );
  
  export default reducer;
  </code></pre>
  <p>The problem is when I try to dispatch one of these actions imported from my external package. I include the action, e.g. <code>import { uiShowPrompt } from &quot;my-custom-ui-package&quot;;</code> and dispatch it like <code>dispatch(uiShowPrompt(&quot;Show me snackbar&quot;));</code> then I see the two console messages (<code>hit 1</code> and <code>hit 2</code>) displayed, but then the following error:</p>
  <blockquote>
  <p>Uncaught TypeError: Cannot read property 'type' of undefined</p>
  <pre><code>at store.js:12
  at dispatch (applyMiddleware.js:35)
  at my-custom-ui-package.js:1
  at index.js:8
  at middleware.js:22
  at store.js:15
  at dispatch (applyMiddleware.js:35)
  at auth.js:28
  at index.js:8
  at middleware.js:22
  </code></pre>
  </blockquote>
  <p>The store itself looks like this:</p>
  <pre><code>import { createStore, combineReducers, applyMiddleware, compose } from &quot;redux&quot;;
  import thunk from 'redux-thunk';
  import { browserHistory } from &quot;react-router&quot;;
  import {
    syncHistoryWithStore,
    routerReducer,
    routerMiddleware
  } from &quot;react-router-redux&quot;;
  import reducer from &quot;./reducer&quot;;
  
  const loggerMiddleware = store =&gt; next =&gt; action =&gt; {
      console.log(&quot;Action type:&quot;, action.type);
      console.log(&quot;Action payload:&quot;, action.payload);
      console.log(&quot;State before:&quot;, store.getState());
      next(action);
      console.log(&quot;State after:&quot;, store.getState());
  };
  
  const initialState = {};
  
  const createStoreWithMiddleware = compose(
    applyMiddleware(
      loggerMiddleware, 
      routerMiddleware(browserHistory), 
      thunk)
  )(createStore);
  
  const store = createStoreWithMiddleware(reducer, initialState);
  
  export default store;
  </code></pre>
  <p>I'm afraid I don't understand this error. I don't see what I'm doing differently other than essentially moving identical code from my local project to an npm package. Since neither the actions nor reducer actually depend on redux, my npm package doesn't itself have a dependency on <code>react-redux</code>. Is that a problem? If there's anything else I could share to help you help me just let me know. Like I say, I'm still fairly new to all this so clearly there's something I'm not getting right!</p>