title: Using React Redux Loading Bar : Cannot read property 'default' of undefined
body: <p><strong>EDIT</strong></p>
  <p>Updated and installed the lib with its updated newer package, but now getting the following error,</p>
  <pre><code>TypeError: Cannot read property 'default' of undefined
  Function.mapStateToProps [as mapToProps]
  node_modules/react-redux-loading-bar/build/loading_bar.js:300
    297 | 
    298 | var mapStateToProps = function mapStateToProps(state, ownProps) {
    299 |   return {
  &gt; 300 |     loading: state.loadingBar[ownProps.scope || _loading_bar_ducks.DEFAULT_SCOPE]
    301 |   };
    302 | };
    303 | 
  </code></pre>
  <p><strong>PREVIOUS:</strong></p>
  <p>I am using <code>React Redux Loading Bar</code> from <a href="https://twitter.com/tylermcginnis" rel="nofollow noreferrer">TylerMcginnis</a> <a href="https://github.com/tylermcginnis/react-redux-loading-bar" rel="nofollow noreferrer">here</a>. Please note that I am not using loading bar middleware but instead a dispatch. What am I missing or doing wrong?</p>
  <pre><code>TypeError: state.loadingBar is undefined
  Uncaught TypeError: state.loadingBar is undefined
      Redux 7
      React 3
      ConnectFunction Redux
      React 18
      js index.js:20
      Webpack 7
  </code></pre>
  <p>Here is the code,</p>
  <pre><code>import React, { Fragment } from 'react';
  import { connect } from 'react-redux';
  //    import LoadingBar from 'react-redux-loading';
  import LoadingBar from 'react-redux-loading-bar';
  
  function Login({ users, userKeys, loading }) {
      return (
          &lt;Fragment&gt;
              &lt;LoadingBar /&gt;
              &lt;div className='container'&gt;
                  {loading ? null : (
                      &lt;div&gt;
                          &lt;label htmlFor='users'&gt;Please select a User&lt;/label&gt;
                          &lt;br /&gt;
                          &lt;select id='users' name='usersList'&gt;
                              {userKeys.map(id =&gt; (
                                  &lt;option value={id}&gt;{users[id].name}&lt;/option&gt;
                              ))}
                          &lt;/select&gt;
                      &lt;/div&gt;
                  )}
              &lt;/div&gt;
          &lt;/Fragment&gt;
  
      );
  }
  
  function mapStateToProps({ users }) {
      return {
          loading: users === null,
          users,
          userKeys: Object.keys(users)
      };
  }
  
  export default connect(mapStateToProps)(Login);
  </code></pre>
  <p>Reducers index:</p>
  <pre><code>import { combineReducers } from &quot;redux&quot;;
  import { loadingBarReducer } from 'react-redux-loading-bar';
  import questions from './questions';
  import users from './users';
  
  export default combineReducers({
      loadingBarReducer,
      questions,
      users
  });
  </code></pre>
  <p>action :</p>
  <pre><code>export function handleInitialData() {
      return dispatch =&gt; {
          dispatch(showLoading());
          return getInitialData().then(({users, questions}) =&gt; {
              dispatch(receiveQuestions(questions));
              dispatch(receiveUsers(users));
              dispatch(hideLoading());
          });       
      };
  }
  </code></pre>