WebStorm에서 React TypeScript import 관련 오류

안녕하세요, JetBrains 지원팀.

현재 WebStorm에서 TypeScript 프로젝트를 개발하는 중에 import 구문에서 발생하는 일시적인 오류(빨간줄) 문제로 인해 어려움을 겪고 있습니다. 이 문제는 특정 파일을 열고 작업할 때 import 구문에 빨간줄이 나타나지만, 파일을 다시 열거나 IDE를 삭제 후 재설치하면 일시적으로 사라졌다가 다시 나타나는 현상입니다. 프로젝트 빌드나 실행에는 문제가 없으나, 이러한 오류 표시가 지속적으로 발생하여 개발 경험에 불편을 초래하고 있습니다.

### 문제 설명:

- WebStorm에서 TypeScript 프로젝트를 개발 중입니다.

- import 구문에서 `Cannot find module` 오류가 일시적으로 발생합니다.

- 파일을 열고 작업할 때 빨간줄이 나타나며, 파일을 닫았다 다시 열면 오류가 사라집니다.

- IDE를 재시작하면 오류가 사라지지만, 몇 시간 후에 다시 발생합니다.

- 프로젝트 빌드와 실행에는 문제가 없으며, 브라우저에서 크래시가 발생하지 않습니다.

- TypeScript 버전은 `package.json`에 명시되어 있으며, `tsconfig.json` 설정은 올바르게 적용되고 있습니다.

- `paths` 설정을 사용하여 절대 경로를 매핑하고 있으며, 이 설정이 정상적으로 동작합니다.

### 시도해본 해결 방법:

1. WebStorm의 캐시 무효화 및 재시작 (100번 이상 시도).

2. `node_modules` 디렉토리 삭제 및 패키지 재설치.

3. TypeScript Language Service 비활성화 및 재활성화.

4. WebStorm 플러그인 비활성화 및 제거.

5. WebStorm을 최신 버전으로 업데이트.

6. WebStorm 재설치 및 설정 초기화.

7. TypeScript 설정(`tsconfig.json`) 확인 및 조정.

8. TypeScript 버전 고정 및 재설치.

### 프로젝트 정보:

- WebStorm 버전: [WebStorm 버전 정보]

- TypeScript 버전: [TypeScript 버전 정보]

- 프로젝트 구조:

my-project/

├── src/

│ ├── components/

│ │ └── MyComponent.tsx

│ ├── common/

│ │ └── time.ts

│ └── pages/

│ └── MyPage.tsx

├── tsconfig.json

└── package.json

### `tsconfig.json` 내용:

{

"compilerOptions": {

"baseUrl": ".",

"paths": {

   "@components/*": ["src/components/*"],

   "@common/*": ["src/common/*"],

   "@주식회사에이슬립/*": ["src/utils/*"]

},

"outDir": "./dist",

"rootDir": "./src",

"composite": true,

"sourceMap": true,

"target": "es2017",

"module": "esnext",

"moduleResolution": "node",

"jsx": "react-jsx",

"strict": true,

"allowSyntheticDefaultImports": true,

"esModuleInterop": true,

"skipLibCheck": true,

"skipDefaultLibCheck": true,

"forceConsistentCasingInFileNames": true,

"resolveJsonModule": true,

"declaration": true,

"declarationMap": true,

"noEmit": true,

"noImplicitAny": false

},

"include": [

"src/**/*",

"src/**/*.json"

]

}

이 문제를 해결하기 위한 추가적인 조언이나 지원을 부탁드립니다. 필요하다면 프로젝트 관련 파일이나 더 자세한 로그를 제공할 수 있습니다. ( 위 예제는 프로젝트 관련 파일은 아니라 간략화 한 것 입니다. )

감사합니다.

[Byung Hoon Park]