[ Vite ] React-Vite Error : If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

 

Vite 로 개인 프로젝트를 진행하던 도중 

[plugin:vite:import-analysis] 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.

 

위와 같은 에러를 만났다.

 

처음엔 무엇이 문제인지 한참헤메다가 구글링을 통해 알아낸 것은

 

Vite는 기본적으로 .js 파일 내에서 JSX 구문 사용을 허용하지 않기 때문이다.

 

https://stackoverflow.com/questions/74620427/how-to-configure-vite-to-allow-jsx-syntax-in-js-files

How to configure Vite to allow JSX syntax in JS files?

위 stackoverflow 글에서는 Vite 내 모든 .js 파일에서 JSX 표현식을 지원하도록 변경하는 방법도 포함되어 있다!

 

나는 따로 표현식 지원 변경을 한게 아닌 간단하게 shared 폴더 안 Router.js ==> Router.jsx 로 변경해서 에러를 해결했다.

 

Vite를 통해 프로젝트를 진행한다면, 파일 확장자명을 사용한 문법에 맞게 일관적으로 jsx 나 js로 통일 시켜주면 된다.