[React]Parsing error: 'import' and 'export' may only appear at the top level.

새로 이직한 회사에서 프론트 관련 업무를 하던 도중 해당 에러가 발견했다.

 

 

`}`를 빼먹었을거라고 생각하고 제일 밑에 export 하기 전 }를 쳤더니 에러가 터져난다.

 

즉 }의 위치가 거기가 아니라는 거.

 

구글링을 해보니

 

'}'을 빼먹어 그 밑에서 부터 모두 내부 함수가 되어버리고 최하단까지 도달해서 export default 키워드가 등장했는데 닫침 괄호가 없어서 해당 코드가 함수 내부에 위치하게 되었고 최상단 함수에서 import나 export 실행하라고 해당 에러를 뱉어냈다는거...

 

참고 링크

https://velog.io/@hwang-eunji/Syntax-error-import-and-export-may-only-appear-at-the-top-level

Syntax error: 'import' and 'export' may only appear at the top level

 

사실 리액트 코드를 쉘 스크립트를 돌려서 자동으로 만들고 복붙으로 코드를 완성하고 있기 때문에 벌어진 일이었다.

 

사라진 '}'을 찾기 위해 vscode의 줄 정렬 명령어인 ctrl+K+F를 눌렀다.(사전에 ctrl+A로 전체 선택)

 

찾아보니 역시나 코드 위 쪽의 함수에서 '}' 가 누락 되어있었다.

 

'}'를 누르니 모든 문제가 사라졌다.

 

실수가 불러온 10분의 낭비...ㅋㅋㅋ