I get an error export 'default' (imported as 'thunk') was not found in 'redux-thunk' (possible exports: thunk, withExtraArgument)

I use "react-redux": "^9.0.4", "react-router-dom": "^6.21.1", "react-scripts": "5.0.1", "redux": "^5.0.0", "redux-thunk": "^3.1.0" I want to create login with middleware in React.js with React-Redux, here is my code.

// src/middleware/store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const guard = createStore(rootReducer, applyMiddleware(thunk));

export default guard;

// src/middleware/actions.js
import axios from 'axios';

export const login = (username, password, history) => async (dispatch) => {
  try {
    const response = await axios.post('https://xxx-api.xxx-xxxxxxx.com/users/login', {
      username,
      password,
    });

    dispatch({
      type: 'LOGIN_SUCCESS',
      payload: {
        user: response.data.user,
      },
    });

    localStorage.setItem('token', response.data.data.token);
    
    history.push('/admin/dashboard');
  } catch (error) {
    console.error('Login error:', error);
    console.log('Gagal login');
  }
};

export const logout = () => (dispatch) => {
  localStorage.removeItem('token');

  dispatch({
    type: 'LOGOUT',
  });
};

// src/middleware/reducers.js
import { combineReducers } from 'redux';

const initialState = {
  user: null,
  isAuthenticated: false,
};

const authReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'LOGIN_SUCCESS':
      return {
        ...state,
        user: action.payload.user,
        isAuthenticated: true,
      };
    case 'LOGIN_FAILURE':
    case 'LOGOUT':
      return {
        ...state,
        user: null,
        isAuthenticated: false,
      };
    default:
      return state;
  }
};

const rootReducer = combineReducers({
  auth: authReducer,
  // ...tambahkan reducer lain jika ada
});

export default rootReducer;

// src/Router.js
import React from 'react';
import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
import { Provider } from 'react-redux';
import guard from './middleware/store';

import LoginPage from './pages/login';
import DashboardPage from './pages/dashboard';
import Page404 from './pages/404';

const AppRouter = () => {
  return (
    <Provider store={guard}>
      <Router>
        <Routes>
          <Route path="/" element={<LoginPage />} />
          <Route path="/admin/dashboard" element={<DashboardPage />} />
          <Route path="*" element={<Page404 />} />
        </Routes>
      </Router>
    </Provider>
  );
};

export default AppRouter;

// src/pages/login/index.js
import React, { useState } from 'react';
import { useDispatch } from 'react-redux';
import { useNavigate } from 'react-router-dom';
import { login } from './../../middleware/actions';

const LoginPage = () => {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const dispatch = useDispatch();
  const history = useNavigate();

  const handleUsernameChange = (event) => {
    setUsername(event.target.value);
  };

  const handlePasswordChange = (event) => {
    setPassword(event.target.value);
  };

  const handleSubmit = (event) => {
    event.preventDefault();
    dispatch(login(username, password, history));
  };

  return (
    <div>
      <h2>Login Form</h2>
      <form onSubmit={handleSubmit}>
        <div className="mb-3">
          <label htmlFor="username" className="form-label">Username:</label>
          <input
            type="text"
            className="form-control"
            id="username"
            value={username}
            onChange={handleUsernameChange}
            required
          />
        </div>
        <div className="mb-3">
          <label htmlFor="password" className="form-label">Password:</label>
          <input
            type="password"
            className="form-control"
            id="password"
            value={password}
            onChange={handlePasswordChange}
            required
          />
        </div>
        <button className='btn btn-success' type="submit">Login</button>
      </form>
    </div>
  );
};

export default LoginPage;

and here is the error from my code

Can you guys help me to solve the error in my project? what's wrong in my code?

Solution

import {thunk} from 'redux-thunk';

Just change this line in the "// src/middleware/store.js" and it should run perfectly.