title: "Uncaught TypeError: Cannot read property 'type' of undefined" and unclear what it is related to
body: <p>I originally thought this was an issue with <code>react-redux</code>, <code>axios</code>, <code>lodash</code>, and/or <code>react-dropzone</code>; however, files are uploading fine, but this error still triggers. (Even though it is says "failed" in console, the files are being posted to the server).</p>
  
  <p>I am starting to think the issue might be related to <code>react-router-redux</code> based on what I read here:</p>
  
  <p><a href="https://github.com/reactjs/react-router-redux/issues/182" rel="noreferrer">https://github.com/reactjs/react-router-redux/issues/182</a></p>
  
  <p>However, the suggestions are not working for me.</p>
  
  <p>Anyway, I am getting an <code>Uncaught TypeError: Cannot read property 'type' of undefined</code> that I can't really tell what is causing it or how to resolve it. Here are some screenshots of the errors:</p>
  
  <p><img src="https://user-images.githubusercontent.com/33135849/34541443-0b1d836a-f08d-11e7-9fa3-a25e98613139.png" alt="undefined">
  <img src="https://user-images.githubusercontent.com/33135849/34541447-0ccde06a-f08d-11e7-8c26-7134727db767.png" alt="line"></p>
  
  <p>So here is what should be relevant to <code>react-router</code>. Just not sure what is going on.</p>
  
  <p>The entry point:</p>
  
  <pre><code>// ./react/index.js
  import React from 'react';
  import ReactDOM from 'react-dom';
  import { Provider } from 'react-redux';
  import { createStore, applyMiddleware, compose } from 'redux';
  import thunk from 'redux-thunk';
  import { BrowserRouter, Switch, Route } from 'react-router-dom';
  import { routerMiddleware, ConnectedRouter } from 'react-router-redux';
  
  import createHistory from 'history/createBrowserHistory';
  
  // Render on every route
  import App from './components/app';
  import Navbar from './containers/global/navbar';
  import Footer from './containers/global/footer';
  
  // Reducers 
  import rootReducer from './reducers';
  
  // SCSS for the project
  import styles from '../assets/scss/main.scss';
  
  // IE polyfill error fix
  require('es6-promise').polyfill();
  var axios = require('axios');
  
  const history = createHistory();
  
  const initialState = {};
  const enhancers = [];
  const middleware = [thunk, routerMiddleware(history)];
  
  if (process.env.NODE_ENV === 'development') {
      const devToolsExtension = window.devToolsExtension
  
      if (typeof devToolsExtension === 'function') {
          enhancers.push(devToolsExtension())
      }
  }
  
  const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers);
  const protectedRoute = compose(Timers, RequireAuth);
  
  const store = createStore(rootReducer, initialState, composedEnhancers);
  
  ReactDOM.render(
      &lt;Provider store={store}&gt;
          &lt;ConnectedRouter history={history}&gt;
              &lt;div&gt;
                  &lt;Navbar /&gt;
                  &lt;App /&gt;
                  &lt;Switch&gt;
                        // various routes go here...
                  &lt;/Switch&gt;
                  {/*&lt;Footer /&gt;*/}
              &lt;/div&gt;
          &lt;/ConnectedRouter&gt;
      &lt;/Provider&gt;
      , document.querySelector('.container'));
  </code></pre>
  
  <p>The global reducers and those that pertain to the action that triggers the error.</p>
  
  <pre><code>// ./react/reducers/index.js
  import { combineReducers } from 'redux';
  import { reducer as form } from 'redux-form';
  import { routerReducer } from 'react-router-redux';
  import documentReducer from './documents';
  
  const rootReducer = combineReducers({
      form,
      router: routerReducer,
      documents: documentReducer,
  });
  
  export default rootReducer;
  </code></pre>
  
  <hr>
  
  <pre><code>// ./react/reducers/documents.js
  import {
      DOCUMENTS
  } from '../actions/documents';
  
  export default function(state = {}, action) {
      switch(action.type) {
          case DOCUMENTS:
              return { 
                  ...state, 
                  survey_id: action.payload.survey_id, 
              };
          default:
              return state;
      }
  
      return state;
  }
  </code></pre>
  
  <p>Finally, the action that is being called when the error is raised. <strong>One important thing to point out: the error does not occur when the the <code>axios.post</code> is not in <code>_.map</code> (actually any kind of array iteration). However, that only sends one file which is not the behavior I am after.</strong></p>
  
  <pre><code>// ./react/actions/documents.js
  import _ from 'lodash';
  import axios from 'axios';
  import { push } from 'react-router-redux';
  import { ROOT_URL } from '../../config/config.json';
  
  // Establish the different types
  export const DOCUMENTS = 'documents';
  
  export function submitDocument(files) {
      const uploaders = _.map(files, f =&gt; {
          const formData = new FormData();
  
          formData.append('file', f);
  
          return axios.post(
              `${ROOT_URL}/api/documents/fileupload`,
              formData,
              { headers: 
                  { 
                      'content-type': 'multipart/form-data',
                      'Authorization': 'JWT ' +  sessionStorage.getItem('token')
                  }
              }            
          )
  
      });
  
      axios.
          all(uploaders)
          .then(response =&gt; {
              console.log('Success');
          })
          .catch(error =&gt; {
              console.log('Failed');
          })
  }
  </code></pre>
  
  <p>The container that calls the action would probably be helpful as well:</p>
  
  <pre><code>// ./react/containers/documents/submit_documents.js
  import _ from 'lodash';
  import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { submitDocument } from '../../actions/documents';
  import Dropzone from 'react-dropzone';
  
  class SubmitDocuments extends Component {
  
      constructor() {
          super();
          this.state = {
              filesToBeSent: [],
              filesPreview: [],
          }
  
          this.handleClick = this.handleClick.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
          this.onDrop = this.onDrop.bind(this);
      }
  
      handleSubmit(event) {
          event.preventDefault();
          this.props.submitDocument(this.state.filesToBeSent);
      }
  
      onDrop(acceptedFiles) {
          var filesToBeSent = this.state.filesToBeSent;       
          _.map(acceptedFiles, f =&gt; {
              filesToBeSent.unshift(f);
          });
  
          filesToBeSent = _.uniqBy(filesToBeSent, 'name');
  
          var filesPreview = [];
  
          _.map(filesToBeSent, i =&gt; {
              filesPreview.unshift(
                  &lt;div key={i.name}&gt;
                      &lt;h5&gt;{i.name} - {i.size} bytes&lt;/h5&gt;
                  &lt;/div&gt;
              )            
          });
  
          this.setState({
              filesToBeSent,
              filesPreview
          });
      }
  
      render() {
          return (
              &lt;form onSubmit={this.handleSubmit}&gt;
                  &lt;div className='panel panel-default'&gt;
                      &lt;div className='panel-heading'&gt;
                          &lt;h4&gt;&lt;strong&gt;Submit Documents&lt;/strong&gt;&lt;/h4&gt;
                      &lt;/div&gt;
  
                      &lt;div className='panel-body'&gt;
                          &lt;Dropzone className='dropzone' onDrop={this.onDrop}&gt; 
                              &lt;h3&gt;Click to add files or drag files here to upload&lt;/h3&gt;
                          &lt;/Dropzone&gt;
                          {this.state.filesPreview}
                          &lt;button type='submit' disabled={this.state.filesPreview.length &lt; 1} className='btn btn-primary'&gt;Submit&lt;/button&gt;
                          &lt;button type='button' className='btn btn-danger' onClick={this.handleClick}&gt;Cancel&lt;/button&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/form&gt;
          ); 
      }
  }
  
  function mapStateToProps(state) {
      return {
          survey_id: state.documents.survey_id
      }
  }
  
  export default connect(mapStateToProps, { submitDocument })(SubmitDocuments);
  </code></pre>
  
  <p>Also, because <code>webpack</code> is mentioned in the error, here is the config for it:</p>
  
  <pre><code>var path = require('path')
  var webpack = require('webpack')
  var BundleTracker = require('webpack-bundle-tracker')
  var ExtractTextPlugin = require('extract-text-webpack-plugin')
  
  module.exports = {
    context: __dirname,
  
    entry: [
      '../react/index'  
    ],
  
    output: {
        path: path.resolve('./src/assets/bundles/'),
        filename: './js/[name]-[hash].js'
    },
  
    plugins: [
      new BundleTracker({filename: './src/config/webpack-stats.json'}),
      new ExtractTextPlugin({filename: './css/[name].[hash].css', allChunks: true})
    ],
  
    module: {
      loaders: [
        // {test: /\.(jpe?g|png|gif|svg)$/i, loader: "url-loader?name=img/[name].[ext]"},
        { 
          test: /\.jsx?$/, 
          exclude: /node_modules/, 
          loader: 'babel-loader',
          query: {
            presets: ["react", "es2015", "stage-1"]
          }
        },
        {
          test: /\.json$/,
          loader: ['json-loader'] 
        },
        {
          test: /\.scss$/,
          loader: ['style-loader', 'css-loader', 'sass-loader'] 
        },
        {
          test: /\.scss$/,
          use: ExtractTextPlugin.extract({
            fallback: 'style-loader',
            use: 'css-loader'
          })      
        },   
      ],
    },
  
    resolve: {
      extensions: ['*', '.js', '.jsx', '.gif']
    }
  }
  </code></pre>
  
  <p>Anyway, not sure what is causing it and have been trying to resolve it for several days now. Everything works fine otherwise, it just looks unprofessional.</p>