react-redux <Provider> – Blank page

My program was working just fine until I started working with ‘react-redux’. Now I get a blank page on localhost and the console shows the error:

Uncaught TypeError: Found non-callable @@iterator

Here is my code:

store

    import {createStore, applyMiddleware, compose} from 'redux'
    import thunk from 'redux-thunk';
    import rootReducer from './reducers/rootReducer';
    
    import {sessionService} from 'redux-react-session';
    
    const initialState = {};
    const middlewares = {thunk};
    
    const store = createStore(rootReducer, initialState, compose (applyMiddleware(...middlewares)));
    
    sessionService.initSessionService(store);
    
    export default store

rootReducer

    import {combineReducers} from 'redux';
    
    //session
    import {sessionReducer } from "redux-react-session";
    
    const rootReducer = combineReducers ({
        session: sessionReducer
    });
    
    export default rootReducer;

App

    import React from 'react';
    
    // Pages
    import Home from './pages/Home';
    import Login from './pages/Login';
    import Signup from './pages/Signup';
    import Dashboard from './pages/Dashboard';
    
    
    //Styled Components
    import {StyledContainer} from './components/Styles';
    
    import { HashRouter as Router, Route, Routes } from "react-router-dom";
    
    function App() {
      return (
        <Router>
          <StyledContainer>
            <Routes>
              <Route path='/signup' element={<Signup/>} />
    
              <Route path='/login' element={<Login/>} />
    
              <Route path='/dashboard' element={<Dashboard/>} />
    
              <Route path='/' element={<Home/>} />
    
            </Routes>
          </StyledContainer>
        </Router>
      );
    }
    
    export default App;

index

    import React from 'react';
    import ReactDOM from 'react-dom';
    import './index.css';
    import App from './App';
    
    
    // auth
    import {Provider } from 'react-redux';
    import store from "./auth/store";
    
    ReactDOM.render(
      <React.StrictMode>
        <Provider store={store}>
          <App />
        </Provider>            
      </React.StrictMode>,
      document.getElementById('root')
    );

I don’t know what is wrong, and I don’t have experience. I was trying to following a tutorial: https://www.youtube.com/watch?v=HCnHYz6TXA4
Thanks in advance!

>Solution :

Looks like a duplicate of Found non-callable @@iterator in reactjs store

You’re trying to apply the spread operator to an object in your store setup. Plain javascript objects are not iterable, which is why you’re getting an error about a non-callable @@iterator.

const middlewares = {thunk};
    
const store = createStore(rootReducer, initialState, compose (applyMiddleware(...middlewares)));

middlewares should be an array:

const middlewares = [thunk];
    
const store = createStore(rootReducer, initialState, compose (applyMiddleware(...middlewares)));