Warning: Failed prop type: The prop `store` is marked as required in `Provider`, but its value is `undefined`. in Provider

16,944

You export store as default: export default store;

You need to import it this way: import store from './Store/Store'

There are two kinds of export:

  • export myVar must be imported with { and }
  • export default myVar must be imported without { and }

This is useful to export/import multiple variables/functions from a file:

// file.js
export a;
export b;
export default c;
//otherfile.js
import c, { a , b} from './file';
Share:
16,944

Related videos on Youtube

Naveed Aheer
Author by

Naveed Aheer

Angular, React, Node JS, JavaScript

Updated on October 11, 2020

Comments

  • Naveed Aheer
    Naveed Aheer over 3 years

    How to resolve this error in react-redux project error screenshot Warning: Failed prop type: The prop store is marked as required in Provider, but its value is undefined. in Provider

    import React from 'react';
    import ReactDOM from 'react-dom';
    import App from './App';
    import './index.css';
    import SignUp from './Components/SignUp'
    import SignIn from './Components/SignIn'
    import Home from './Components/Home'
    import { Router, Route, hashHistory, IndexRoute, browserHistory } from 'react-router';
    import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
    import {firebaseApp} from './Database/firebaseApp'
    import {Provider} from 'react-redux'
    import {store} from './Store/Store'
    import {logUser} from './Store/Actions'
    ReactDOM.render(
      <MuiThemeProvider>
        <Provider store={store}>
          <Router history={browserHistory} >
            <Route path="/signup" component={SignUp} ></Route>
            <Route path="/signin" component={SignIn} ></Route>
            <Route path="/home" component={Home} ></Route>
          </Router>
        </Provider>
      </MuiThemeProvider>
      ,
      document.getElementById('root')
    );
    

    //store code below

    import { createStore, applyMiddleware,combineReducers } from 'redux';
    import thunk from 'redux-thunk';
    import {createLogger} from "redux-logger";
    //import logger from 'redux-logger'
    //import rootReducer from './Reducers/rootReducer'
    import {authReducer} from "./Reducers/authReducer"
    const rootReducer = combineReducers({
        authReducer
    })
    const logger = createLogger();
    let store = createStore(rootReducer, applyMiddleware(thunk, logger) );
    export default store;
    

Related