[react] 에러 지옥 - 경로 문제

에러 상황

context API로 작업했던 프로젝트를 redux로 리팩터링 하는 작업을 하고 있었는데 아래와 같은 에러를 마주하게 되었다. 

 

첫 번째 에러

Module not found: Error: Package path ./config/configStore is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json)
Did you mean './redux/config/configStore'?
Requests that should resolve in the current directory need to start with './'.
Requests that start with a name are treated as module requests and resolve within module directories (node_modules, C:\codeGit\artist-letters-project\node_modules, C:\codeGit\artist-letters-project\src).
If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.

 

 

이 에러 때문에 하루종일 삽질을 했다...

index.js 에 configStore에서 만든 store를 import 하고 App 컴포넌트를 Proiver로 감싸주었는데 계속 에러가 발생했다. 

 

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { Provider } from "react-redux";
import store from "redux/config/configStore"; //이 부분이 문제!!!!

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

 

[삽질 리스트]

• node_modules, package.lock.json 삭제 후 npm install로 다시 설치

구글링을 하다가 node_modules와 package.lock.json을 삭제 후 다시 설치하면 된다고 해서 해봤지만... 해결되지 않았다.

 

그러다가 팀원분께 혹시 같은 에러를 경험했는지 여쭤봤는데, 경로 문제가 있었다고 말씀해주셔서 경로를 의심하게 됐다. 

팀원분은 경로에 '..' 을 넣어서 해결하셨다고 했는데 나는 되지 않았다. 

그래도 팀원분 덕분에 경로가 문제라는 힌트를 얻게 되었다!!

 

첫 번째 에러의 해결방법

힌트를 기반으로 경로를 다양한 방식으로 바꿔봤는데 해결이 되었다.

//import store from "/redux/config/configStore"; //수정 전

import store from "./redux/config/configStore"; //수정 후

 

vscode 가 자동으로 넣어준 부분이라 의심을 못했다...

해결한 기쁨도 잠시... 또 다른 경로 에러를 마주하게 된다...

 

두 번째 에러

 

ERROR in ./src/redux/config/configStore.js 4:0-42
Module not found: Error: Package path ./modules/member is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json)

ERROR in ./src/redux/config/configStore.js 5:0-42
Module not found: Error: Package path ./modules/letter is not exported from package C:\codeGit\artist-letters-project\node_modules\redux (see exports field in C:\codeGit\artist-letters-project\node_modules\redux\package.json)

 

계속 letter 와 member js를 찾을 수 없다는 에러가 났다..

contextAPI에서 redux로 리팩토링 하는 중이라서 아직 남은 context 코드들 때문인가 싶어서 그 부분도 다 정리해도 계속 에러가 발생했다.

 

그러다가 configStore.js 에서 모듈의 경로를 수정해 보기로 했다.

 

두 번째 에러의 해결 방법

[수정 전]

import letter from "redux/modules/letter";
import member from "redux/modules/member";

 

 

이 경로에서 redux 대신 .. 으로 경로를 변경해 보았다.

[수정 후]

import letter from "../modules/letter";
import member from "../modules/member";

 

해결 완료!

 

 

느낀 점

경로를 세팅하는 config를 사용 중이었는데 두 가지 에러가 발생한 부분에서 왜 적용이 안된 건지 모르겠다ㅠㅠ

 

[src를 기본 경로로 하는 설정]

{
  "compilerOptions": {
    "baseUrl": "src"
  },
  "include": ["src"]
}

 

vscode 가 넣어준 경로이다 보니... 이 부분이 문제일 거라고는 생각을 못했다.

후... vscode 가 넣어준 경로도 틀릴 수 있으니... 에러가 나면 잘 확인해야겠다...

 

힌트를 주신 팀원님 정말 감사합니다!