리액트 오류 - If you are using JSX

리액트를 하다보면 다음과 같은 오류를 마주할 때가 있다.

vite] Internal server error: Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

이런식으로 빨간 글자가 뜨는데 이는 참조하려는 모듈의 파일 확장자명이 다르기 때문이다.

따라서 해결방법은 간단하다.

참고하려는 모듈의 파일 확장자명을 일관적으로 jsx 나 js로 통일 시켜주면 된다.

(사실 jsx 파일과 js 파일의 차이점은 없다고한다. 그냥 순수한 자바스크립트 문법을 썼느냐 아니냐하는 것일 뿐..)