CODEWITHSUNDEEP
reduxreact-reduxredux-thunkredux-sagareact-router-redux
rohit
rohit

Reputation: 309

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

enter image description hereenter 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.

Upvotes: 6

Views: 8045

Answers (3)

varoons
varoons

Reputation: 3887

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

Upvotes: 0

CodingBingo
CodingBingo

Reputation: 1

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

Upvotes: 0

Juan Lanus
Juan Lanus

Reputation: 2344

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.
enter image description here 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.

Upvotes: 6

Related Questions