error 해결법: 'File name '' differs from already included file name '' only in casing' on relative path with same casing

에러 발생

특정 파일을 import 한 뒤 호출시 아래와 같은 에러가 발생할 때가 있다.

import SignupModal from './features/app/SignupModal';

Error TS1149: File name 'C:/Project/frontend/scripts/State.ts' differs from already included file name '../frontend/scripts/State.ts' only in casing.

 

원인

1. 파일 이름이 잘못되었다.

2. 타입스크립트 설정과의 충돌

3. 개발툴이 이상하다.

 

해결법

1. 파일 이름을 한번 더 확인한다.

보통 소대문자가 잘못되어있었다.

ex) 파일 이름이

SignupModal.tsx 이여야하는데

Signupmodal.tsx 였다.

또는 import 의 from 뒷부분이 파일 이름이 잘못되어있었다. 

2. tsconfig.json 파일 내부 forceConsistentCasingInFileNames 를 false 로 변경해준다.

 

3. 위와 같은 설정 확인 후 개발 툴을 재기동 한다.