While using redux in react, the moment I use <Provider></Provider> in my code it throws weird error. what's this?

Question

I'm creating an app using react js, using react-redux as state manager. I have created a file to store all my states at one place and while using the Provider in my app.js I'm getting this weird huge error. I'm a beginner and learning redux and in the beginning I am not able to understand this. Please help someone as soon as possible.

my app.js looks like this:

import React, { Component } from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import Contacts from './components/contacts/Contacts';
import AddContact from './components/contacts/AddContact';
import EditContact from './components/contacts/EditContact';
import Header from './components/layout/Header';
import About from './components/pages/About';
import NotFound from './components/pages/NotFound';
import {Provider} from 'react-redux';
import store from './store';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

class App extends Component {
  render() {
    return (
      <Provider store={store}>
        <Router>
          <div className="App">
            <Header branding="Contact Manager" />
            <div className="container">
              <Switch>
                <Route exact path="/" component={Contacts} />
                <Route exact path="/contact/add" component={AddContact} />
                <Route exact path="/contact/edit/:id" component={EditContact} />
                <Route exact path="/about" component={About} />
                <Route component={NotFound} />
              </Switch>
            </div>
          </div>
        </Router>
      </Provider>     
    );
  }
}

export default App;

if I don't use Provider here, app runs. Screenshot of errors is attached.

The errors I get:

Provider
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-redux/es/components/Provider.js:11
   8 | var store = _ref.store,
   9 |     context = _ref.context,
  10 |     children = _ref.children;
> 11 | var contextValue = useMemo(function () {
  12 |   var subscription = createSubscription(store);
  13 |   subscription.onStateChange = subscription.notifyNestedSubs;
  14 |   return {
View compiled
mountIndeterminateComponent
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-dom/cjs/react-dom.development.js:13380
  13377 |   }
  13378 | 
  13379 |   ReactCurrentOwner.current = workInProgress;
> 13380 |   value = fn(props, context);
  13381 | }
  13382 | // React DevTools reads this flag.
  13383 | workInProgress.effectTag |= PerformedWork;
View compiled
beginWork
C:/Users/lenovo/Desktop/contactmanager_redux/node_modules/react-dom/cjs/react-dom.development.js:13820
  13817 | 
  13818 | switch (workInProgress.tag) {
  13819 |   case IndeterminateComponent:
> 13820 |     return mountIndeterminateComponent(current, workInProgress, renderExpirationTime);
  13821 |   case FunctionalComponent:
  13822 |     return updateFunctionalComponent(current, workInProgress);
  13823 |   case ClassComponent:

Here is the screenshot of errors:

Here is the code in my store.js :

import {createStore, applyMiddleware, compose} from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers/index';

const initialState = {};

const middleware = [thunk];

const store = createStore(rootReducer, initialState, compose(applyMiddleware(...middleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()));

export default store;

following is the code in the rootReducer from './reducers/index' :

import {combineReducers} from 'redux';
import contactReducer from './contactReducer';

const rootReducer = combineReducers({
  contact: contactReducer
});

export default rootReducer;

and contactReducer from './contactReducer':

const initialState = {};

export default function(state = initialState, action){
  switch(action.type){
    default:
      return state;
  }
}

Answer 1

The issue happens because of your version. Not all versions are compatable with eatch other and it seems your react and react-dom is not compatable with react-redux. You need to update it. Type this into your terminal in your project root

npm upgrade react react-dom

This should update your packages and work fine after a restart.

In addition, I took a look at your project and here is few quick TIPs:

1st. .js is for javascript. If you are returning html (for example your APP.js file) it should end in .jsx. The jsx means javascript xml. While it works... thats not how it suppost to be. Any file with a return of HTML should be .jsx or .tsx for typescript.

2nd. DONT put node_modules folder in your repository. Its a folder where your packages are stored. You dont need it. The package.json keeps track of what packages you need of what version. Whenever you freshly pull a project simply do npm i (short for npm install) and all the packages will be downloaded for you.

3nd. Dont put package-lock.json. Its uneeded. It get generated whenever yo urun npm i to install nay package.

4th. Nowadays a standart is ES6. Meaning all the classes you have - would recommend switching to arrow functions. Instead of

class App extends Component {
  render() {
    ..code..
  }
}

it would be

const App = () => {
  return {
    ..code..
  }
}

When working with states and lots of logic, arrow functions are cleaner IMO.

5th. clean code! There are guides on this on a basic scale. There is a hard limit of how many characters you should have in a single line - break up your code. There are rules of when you should break your code and in what section. This all matters. While the code works - not correctly formatted code can be hard to read and debug. If your using a visual studio code (VSC) I woudl recommend an extension Prettier - code formatter. Its a life savior!

In addition dont do

if (name === "") {
  this.setState({ errors: { name: "Name is required" } });
  return;
}

if (email === "") {
  this.setState({ errors: { email: "Email is required" } });
  return;
}

if (phone === "") {
  this.setState({ errors: { phone: "Phone is required" } });
  return;
}

If you need so many IFs then use switch. But in your case you can simply do a single function to check if its empty or not and a loop to check each field that is required. Or better yet - use build in required tag on form elements. You can give required parameter to <input /> to make it required on form submit. and make a custom error message for it. There are many ways to handle it and yours is not the way. Would suggest looking more into it :)

Hope these short tips help and the update help your issue :)