경고! 대소문자만 다른 이름을 가진 여러 모듈이 있습니다 | React, typescript, webpack ERROR

회사 업무 중 리액트, 타입스크립트 기반으로 퍼블리싱 작업을 하고 있었던때 입니다

제 파일을 받아 프론트 개발을 하던 사수님이 경고가 뜨는데 알아보라고 하시더군요

그때 해결한 문제를 공유하려고 합니다

 

 

 

---

 

 

1. 경고 멘트

이 내용을 그대로~ 긁어서 번역기를 돌려보니

대소문자만 다른 이름을 가진 여러 모듈이 있습니다. 라고 번역되더라구요

기준은 ModalLayout 컴포넌트 같고,

ModalLayout 컴포넌트를 사용한 다른 컴포넌트들 MarketSearchModal, POICategoryModal과 비교해봐~ 라는 말 같습니다

ModalLayout 컴포넌트의 디렉토리 구조는 이렇게 되어있습니다

공통으로 사용중인 ModalLayout 컴포넌트 디렉토리 구조

 

 

 

2. ModalLayout 컴포넌트를 사용중인 다른 컴포넌트들

ModalLayout 컴포넌트를 불러와서 사용중인 모달1

ModalLayout 컴포넌트를 불러와서 사용중인 모달2

이렇게 ModalLayout 컴포넌트를 inport해서 사용중인데

여기서 오타를 발견했습니다

Layout인데 모달2에는 layout이라고 적혀있더라고요

그래서 이 부분을 수정해줬습니다만

문제가 해결되지 않았습니다 ^^!

 

 

 

3. 결국 검색...

맨 처음에는 대소문자라고 하니까 Props 이름들 문제인가........? 했습니다

그래서 뻘짓으로 앞글자를 대문자로 바꿔보든..........ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ 이상한 짓도 하다가

아님 공통 Props를 중복해서 사용해서? (isOpen이 모달창이라면 다 Props로 선언해놨거든요) 싶어서

막 Props 삭제도 해보고... 이름을 다 달리 지정도 해봤습니다.......ㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그러나 당연히 다~ 아무런 반응도 없었고 결국 검색을 해봤습니다

https://github.com/PatrickJS/angular-starter/issues/926

"There are multiple modules with names that only differ in casing" · Issue #926 · PatrickJS/angular-starter

https://stackoverflow.com/questions/45444608/angular-4-error-there-are-multiple-modules-with-names-that-only-differ-in-casin

Angular 4 error: There are multiple modules with names that only differ in casing

http://daplus.net/webpack-webpack-%EB%8C%80%EC%86%8C-%EB%AC%B8%EC%9E%90-%EB%A7%8C-%EB%8B%A4%EB%A5%B8-%EC%9D%B4%EB%A6%84%EC%9D%84-%EA%B0%80%EC%A7%84-%EB%AA%A8%EB%93%88%EC%9D%B4-%EC%97%AC%EB%9F%AC-%EA%B0%9C/

[webpack] Webpack :“대소 문자 만 다른 이름을 가진 모듈이 여러 개 있습니다.”그러나 참조 된 모듈

다들 뉘앙스로 보니까 파일명, 폴더명을 대문자로 바꿔봐라~ 소문자로 바꿔봐라~ 라는 제시가 제일 많더라고요

그마저도 확실하지는 않아서 안된다는 사람도 있고... 누구는 OS 문제다라고 하고........😭

쨌든 혹시 몰라서 폴더명과 파일명을 수정해봤습니다

폴더명과 파일명을 수정

원래는 폴더명을 컴포넌트 이름으로 지정하고 컴포넌트 파일은 index로 쓰는게 관례라고 하더군요

근데 다양한 Layout 컴포넌트들이 만들어질 것 같아서 폴더명을 Layout이라고 정한건데

생각보다... ModalLayout 외에는 만들 컴포넌트가 없었습니다 ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

그래서 하위에 파일 하나밖에 없어서 그런건지 몰라도....

이렇게 바꾸니 해결이 되었습니다(?)

그리고 다른 컴포넌트 import 경로도 수정해줬습니다

inport 경로 수정

대충... 음....엄......... webpack이 빌드 되면서 문제일거다.......? 라는 느낌인 것 같기도 하고........?

원인은 잘 모르겠습니다...........😅