문제

yarn create react-app typescript-readonly_keyword-error --template typescript

위 명령어로 Typescript 형식의 React 프로젝트를 생성 후

프로젝트 셋팅 중 아래와 같은 에러가 나면서 페이지가 뜨지 않는 문제가 발생했다.

(아마 readonly 키워드를 변수명으로 잘못 인지해서 발생하는 에러로 보여진다.)

Failed to compile.

src\App.tsx

Line 6:12: Parsing error: Unexpected token, expected ":"

5 |

6 | export interface IRootState {

> 7 | readonly loadingBar: any;

| ^

8 | }

9 |

10| function App() {

원인 및 해결방법

- 아마 같은 증상이지만 원인이 다를 수 있다. 나의 경우에는 아래와 같았다.

package.json 파일을 수정하다가 eslintConfig 항목을 빠트렸더니 위와 같은 오류가 발생했으며, create-react-app 으로 처음 만들었을 때와 같이 eslintConfig 항목을 넣어줬더니 문제가 없어졌다.