인프런 커뮤니티 질문&답변

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)

(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)

비트로 설치한 모듈에서 제공하지 않는 내보내기라길래
해결방법 찾아보다가

https://github.com/reduxjs/redux-templates

여기에 있는 리드미 내용대로

yarn add vite-template-redux

설치를 하긴 했는데
Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데

그래도 같은 오류가 뜨네요ㅠㅠㅠ

아래는 각각 입력한 코드 내용입니다

store.js

import { applyMiddleware, compose, createStore } from "redux";
import rootReducer from "./reducers";
import thunkMiddleware from "redux-thunk";
// import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware";

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;

const store = createStore(
  rootReducer,
  composeEnhancers(applyMiddleware(thunkMiddleware))
);

export default store;

addTodoThunks.js

import {
  addTodo as addTodoActionCreator,
  removeTodo as removeTodoActionCreator,
} from "../actions/todoAction";

const TODO_MAX_COUNT = 3;

function addTodoThunkActionCreator(text) {
  return async function addTodoThunk(dispatch, getState) {
    const state = getState();

    if (state.todo.length < TODO_MAX_COUNT) {
      dispatch(addTodoActionCreator("아이템 추가중..."));
      setTimeout(() => {
        dispatch(removeTodoActionCreator());
        dispatch(addTodoActionCreator(text));
      }, 3000);
      return;
    } else {
      dispatch(addTodoActionCreator("최대 개수 초과!"));
      setTimeout(() => {
        dispatch(removeTodoActionCreator());
      }, 3000);
    }
  };
}

export default addTodoThunkActionCreator;

TodoAppContainer.js

import { connect } from "react-redux";
// import {
//   addTodoActionCreator,
//   removeTodoActionCreator,
//   removeAllActionCreator,
// } from "../actions";
// import {
//   addTodoActionCreator,
//   removeTodoActionCreator,
//   removeAllActionCreator,
// } from "../ducks/todoDuck";
import {
  addTodo as addTodoActionCreator,
  removeTodo as removeTodoActionCreator,
  removeAll as removeAllActionCreator,
} from "../actions/todoAction";

import addTodoThunkActionCreator from "../thunks/addTodoThunks";
import TodoApp from "../../components/TodoApp";

function mapStateToProps(state, ownProps) {
  return {
    todoItems: state.todo,
  };
}

function mapDispatchToProps(dispatch, ownProps) {
  return {
    addTodo: (text) => {
      // dispatch(addTodoActionCreator(text));
      dispatch(addTodoThunkActionCreator(text));
    },
    removeTodo: () => {
      dispatch(removeTodoActionCreator());
    },
    removeAll: () => {
      dispatch(removeAllActionCreator());
    },
    triggerAsyncFunction: (asyncFunction) => {
      dispatch(asyncFunction);
    },
  };
}

const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp);

export default TodoAppContainer;