Error in <Provider> - Check the render method of `Provider`. react-redux

Question

enter image description here

Code: this is my index.js file

index.js

    import { Provider } from "react-redux";
    import { createStore } from 'redux';

    import App from './app';

    import reducer from './store/reducer';

    const store = createStore(reducer);
    console.log("Store ..."+store);
    console.log(Provider);

    ReactDOM.render((
      <Provider store={store}>
        <App/>
      </Provider>
    ), document.getElementById('root'));

Code: this is my reducer.js file

    reducer.js
    import * as actionTypes from './actions';

    const initialState = {
    assistants:[],
    fetchInProgress:true
    }

    const reducer = (state = initialState, action) =>{

    return state;
    };

    export default reducer;

Code: this is my app.js file app.js

class App extends Component{
render(){
return(
  <HashRouter>
    <Switch>
    <Route exact path="/login" name="Login Page" component={Login}/>
    <Route exact path="/register" name="Register Page" component= 
    {Register}/>
    <Route exact path="/404" name="Page 404" component={Page404}/>
    <Route exact path="/500" name="Page 500" component={Page500}/>
    <Route path="/" name="Home" component={Full}/>
    </Switch>
  </HashRouter>
  );
 }
 }

 export default App;

Error: Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object.

Check the render method of Provider.

please refer both images for error. i am getting error as please check your provider component render method but this is not in my hand to change provider render method. because its imported class from redux so, please help me with this problem i am facing this from last two days not able to solve.

Answer 1

There is an incompatibility with the previous code and the new React or Redux versions.
I had this issue until after I downgraded my installed tools, see the attached image of the package.json files compared.
I don't know which file is the culprit.
With the lineup at the right side of the screen it works, with the other one I get the error no matter what I do.
The version differences are highlighted with a yellow background.
I guess (not tested) that the issue stems from from the version difference between the react and react-dom packages.

A solution suggested by Victor Nunes is to:

1. Delete the package-lock.json file and the node_modules folder
2. Remove all content of "dependencies" on package.json
3. Run npm install --save react react-dom react-redux react-scripts redux

You might need to install another packages in addition to those listed above.