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&rsquo;t resolve 오류 해결 위 링크에서는 유사한 오류에 대해 여러 가지 해결책을 다루고 있으니 참고하시기 바랍니다. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.