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.

Turmel

Is your app.js exporting correctly the component you're trying to render inside the Provider? – Rishi

Can you please show us the App class and store? – Ferrate

I'm looking for help for the exact same issue (maybe learning with the same tutorial by Max). I don't have combined reducers. – Sutter

please refere image for error. I have printed Store and Provider values in console. i.sstatic.net/5AwvS.png – Turmel

I guess you already upgraded react version. You also need to upgrade react-dom and it will resolve this issue. – Ardellaardelle

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.

Sutter

the npm install command you listed above solved this issue for me ( did not delete anything).. it seems to be some dependencies misaligned in my case! thank you!!! i had already tried reinstalling everything but react-dom and react-scripts, so one of those was the culprit for me. – Payday

Also, a link to where you found this information would be helpful for some context! – Payday

@Payday sorry I can't link, the info comes from within a React course I'm taking, and it's not free. – Sutter

Answer 2

I think your issue is with the reducer you are passing in. Have you used combineReducers function to combine your reducers?

import { createStore, combineReducers } from "redux";


const store = createStore(combineReducers({ 
    //...all your reducers 
}));

Working sandbox example

Compare with your code. Maybe start with removing all your routes. Problem might be there

Cameron

I have the same issue, no combined reducers: import * as actions from '../actionNames'; const initialState = { persons: [] }; const reducer = ( state = initialState, action ) => { switch ( action.type ){ case actions.ADD_PERSON: console.log( actions.ADD_PERSON ); return state; case actions.DELETE_PERSON: console.log( actions.DELETE_PERSON ); return state; default: return state; }; }; export default reducer; – Sutter

@user2775366 I don't have a solution yet, if I had one I would share ASAP – Sutter

i have update the Question please go throght all. Help me with same @Cameron – Turmel

Answer 3

I tried importing thunk to solve the data type issue and it is not a solution.

Carburetor

His version DOES work though so it's something we missed concerning handling the store, likely coming in from the state in contact-data that must have either been omitted from the lectures or lost in language updates. It's debugging that I would focus on redux store research if you want the exercise, but I'm going to use his and learn deployment and then focus on learning the language implementation of react/redux processes and work on debugging after. – Carburetor