npm run dev 에러

Question

npm run dev시 새로운 에러가 발생하여 재질문 드립니다.
http://localhost:3090/Login 연결시, 크롬에서 Failed to compile. 가 발생하였습니다.

Module not found: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/layouts'
layouts/workspace.tsx

터미널 메세지입니다.

ERROR in ./pages/Login/index.tsx 17:0-39

Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'

@ ./layouts/App.tsx 7:9-31

@ ./client.tsx 9:0-32 12:95-98

ERROR in ./pages/Login/index.tsx 19:0-37

Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/Login'

@ ./layouts/App.tsx 7:9-31

@ ./client.tsx 9:0-32 12:95-98

ERROR in ./pages/SignUp/index.tsx 17:0-39

Module not found: Error: Can't resolve '@hooks/useInput' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'

@ ./layouts/App.tsx 11:9-32

@ ./client.tsx 9:0-32 12:95-98

ERROR in ./pages/SignUp/index.tsx 23:0-37

Module not found: Error: Can't resolve '@utils/fetcher' in '/Users/kanghyun/Desktop/study/react/zerocho/sleact/setting/front/pages/SignUp'

@ ./layouts/App.tsx 11:9-32

@ ./client.tsx 9:0-32 12:95-98

ㅡ

tsconfig.json 파일입니다
"paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"], "@layouts/*": ["layouts/*"], "@pages/*": ["pages/*"], "@utils/*": ["utils/*"], "@typings/*": ["typings/*"] }

ㅡ

webpack.config.ts 파일입니다
resolve: { extensions: ['.js', '.jsx', '.front', '.tsx', '.json'], alias: { '@hooks': path.resolve(__dirname, 'hooks'), '@components': path.resolve(__dirname, 'components'), '@layouts': path.resolve(__dirname, 'layouts'), '@pages': path.resolve(__dirname, 'pages'), '@utils': path.resolve(__dirname, 'utils'), '@typings': path.resolve(__dirname, 'typings'), // 경로 폴더들 }, },
ㅡ

현재 터미널 경로입니다
/Desktop/study/react/zerocho/sleact/setting/front

ts 폴더에서 설정 후, front 라는 폴더명으로 바꾸어서 진행중입니다. 감사합니다

제로초(조현영) · Answer

아 발견한 것 같은데요. extensions: ['.js', '.jsx', '.front', '.tsx', '.json'] 'ts'가 'front'로 바뀌어 있네요

제로초(조현영) · Answer

webpack.config.ts에서 console.log( path.resolve(__dirname, 'hooks')) 넣으신 다음에 실행했을 때 뭐가 출력되는지 확인해보시겠어요?

인프런 AI 인턴 · Answer

안녕하세요, 인프런 AI 인턴입니다. taei님.

지금 발생한 문제는 모듈을 찾을 수 없다는 오류입니다. 이는 주로 파일 경로나 설정의 문제로 인해 발생할 수 있습니다. 아래에 해결할 수 있는 몇 가지 방법을 제안드립니다:

경로 확인:
- tsconfig.json과 webpack.config.ts 파일 내에서 설정한 경로가 실제 파일 시스템과 일치하는지 확인해보세요. 예를 들어, @hooks의 경로 설정이 hooks 폴더와 맞지 않는 경우 오류가 발생할 수 있습니다.
- hooks, utils 등의 폴더가 실제로 /${projectRoot}/setting/front/에 존재하는지 확인하세요.
폴더 이름과 경로 확인:
- 프로젝트 루트의 경로가 /Desktop/study/react/zerocho/sleact/setting/front임을 확인했는데, 실제로 이 경로에 관련 모듈들이 존재하는지 확인해야 합니다.
- 특히 hooks 폴더와 내부에 useInput이 존재하고, utils 폴더에 fetcher가 있는지 확인하세요.
JSX와 TSX 확장자 문제:
- webpack.config.ts 파일의 extensions에 .jsx, .tsx 등을 추가한 것은 좋지만, 필요한 경우 .ts도 추가하여 타입스크립트 파일도 로드할 수 있도록 설정해야 합니다.

아래는 유사한 문제를 다룬 답변 링크입니다. 다른 사용자들이 겪었던 유사한 문제와 해결 방법을 검토해 보세요:
- Module not found: Error: Can’t resolve 오류 해결

위 링크에서는 유사한 오류에 대해 여러 가지 해결책을 다루고 있으니 참고하시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

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

npm run dev 에러