[error] File was processed with these loaders: react-refrash

다음 애러에 대한 해결책을 제시한다. typescript를 처음 척용하면서 삽질을 많이 했다. 나의경우는 create-react-app을 통해 프로젝트를 생성했다. 그러니 File was processed with these loaders: react-refrash 관련 애러가 발생했다. 추가로 require('/node_modules/react-refresh/runtime.js' 라는 에러도 발생을 했다.

 

객체에 대한 export가 계속 안되길래 as const 나 enum 등등 구글링해서 나오는 모든 것들을 해도 안됐었다. 약 3인정도 고민을 했었다. react-refresh관련 에러가 나오는 이유는 단순했다. color상수 설정을 해서 아래와 같이 만들었었다.

 

export const Colors :{[index:string]: string}  = {
  white: '#fff',
  black: '#282b31',
  gray1: '#12102d',
  gray2: '#222548',
}

 

그런데 export가 계속 안되는것이다. 해결책은 단순하다. CRA로 프로젝트를 생성 시, typescript와 같은 dev 개발환경 설정은 CRA로 생성된 src 폴더 내부에만 적용이 된다. 만약 src 밖에서 설정을 했다면, typescript가 안먹혀서 import를 할 수 가 없다. 나는 src 안으로 위의 colors 객체를 옮기자 관련 오류가 사라지고 프로젝트가 잘 돌아갔다. 

 

만약 src 박에서도 관련 내용이 적용되게 하려면, babel setting을 다시 해주면 된다.