React - Error (Module “constants” has no exported member 'XXX')

React로 개발하던 도중 이상하게 해결이 잘 안되는 에러가 있어서 메모해보려 한다.

React에서 import부분이 ../../../XXX/xxx 와 같이 조금 지저분하다고 느껴서 tsconfig.json 파일에 컴파일 옵션에 경로들을 설정해두면 조금 간략하게 적을 수 있다는 것을 알게 되어 적용하려고 하던 도중

constants.ts 파일을 ./src 이하에 두고 아래와 같이 옵션을 설정했다.

// constants.ts
{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["./components/*"],
	  ...
      "constants": ["constants"]
    },
    ...
  }
}

위와 같이 설정 후 IDE의 기능을 이용해 constants.ts 파일에 변수 XXX 를 자동 임폴트를 작성하니 아래와 같은 import가 작성되었다.

...
import {XXX} from "constants";
...

이런식으로 작성되었는데, XXX 부분에서 에러가 발생하였다.
에러내용은 Module “constants” has no exported member 'XXX' 이었다.
파일경로, export 여부 등 확인해 보았지만 문제점을 발견하지 못했다.
그래서 constants 가 제대로 import 되고 있는지 확인하기 위해

import Constants from "constants";

위와 같이 수정하여 Constants.XXX 와 같이 이용해 보려고 했다.
그런데 Constants 에는 선언하고 정의한 변수 대신 처음보는 변수들이 들어있었다.
이것으로 constants 는 React에서 내부적으로 사용하고 있고, 내가 정의한 constants 와 충돌이 발생했다고 생각되어, 디렉토리 구조를 변경하고 compile option을 수정하니 해결 되었다.

에러 원인

constants 는 React에서 내부적으로 사용되고 있는 경로명인듯 하다.

해결 방법

{
  ...
  "constants/*": ["./constants/*"]
  ...
}

import {XXX} from "constants/AppConstants";

위와 같이 새로운 디렉토리 구조를 생성하여 contants를 이용한다