Expected the root reducer to be a function-CodePudding

I stuck with this error:

Uncaught Error: Expected the root reducer to be a function. Instead, received:''

I've tried every answer I could find but none of them worked i hope you guys can help me

My rootReducer

import {combineReducers} from 'redux'
import changeCategoryReducer from './changeCategoryReducer'
import categoryListReducer from './categoryListReducer'
import productListReducer from './productListReducer'
import cartReducer from './cartReducer'
import saveProductReducer from './saveProductReducer'


const rootReducer = combineReducers({
   changeCategoryReducer,
    categoryListReducer,
    productListReducer,
    cartReducer,
    saveProductReducer
});

export default rootReducer;

configure Store

import {createStore, applyMiddleware} from 'redux'
import * as rootReducer from './index.js'
import thunk from 'redux-thunk'

export default function configureStore(){
    return createStore(rootReducer, applyMiddleware(thunk))
}

index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './components/root/App';
import reportWebVitals from './reportWebVitals';
import 'bootstrap/dist/css/bootstrap.min.css';
import { Provider } from 'react-redux'
import configureStore from './redux/reducers/configureStore'
import 'alertifyjs/build/css/alertify.min.css'
import { BrowserRouter } from 'react-router-dom'


const store = configureStore();

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <Provider store={store}>
        <App />
      </Provider>
    </BrowserRouter>
  </React.StrictMode>
);
reportWebVitals();

CodePudding user response：

You're not correctly importing your rootReducer in the store creation. Instead of importing *, you should import the default export:

import {createStore, applyMiddleware} from 'redux'
import rootReducer from './index.js' // <-- change here
import thunk from 'redux-thunk'

export default function configureStore(){
    return createStore(rootReducer, applyMiddleware(thunk))
}

using import * as rootReducer from './index.js' means you end up with an object like:

rootReducer: {
  default: createReducer(...)
}