[NuxtJS] 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.

Nuxt 3 실행 실패

Nuxt를 버전별로 실행을 해보려다가 우선 Nuxt 3를 공식문서를 따라 실행을 시도해 보았다.

 

프로젝트 생성부터해서 실행까지에 대해서는 따로 정리를 할 것이며,

이번에 작성할 게시글은 공식문서를 따라 프로젝트를 생성하고 실행을 하였는데 에러가 발생한 부분이다.

 

발생한 에러는 다음과 같다.

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.

 

Nuxt 3는 아무래도 국내에서는 아직 많이 사용하지 않는 프레임워크이기 때문에 한글로된 글은 찾을 수 없었고,

stackoverflow에서 재미난 답변을 발견하였다.

https://stackoverflow.com/questions/70762168/nuxt-fails-with-an-error-not-being-able-to-parse-source-for-import-analysis

nuxt fails with an error not being able to parse source for import analysis

 

우선 결론만 가져오자면 다음과 같다.

So the solution to the problem is to get rid of that ' in your path, or wait until a version of nuxt is released that fixes that problem.

해석해보면 경로에 싱글 쿼터가 들어가 있어서 발생한 에러라는 것이다.

질문자에 따르면 질문자가 올린 경로에 싱글 쿼터가 들어가 있는것을 볼 수 있는데, 나 역시 경로에 싱글쿼터가 들어가 있었다.

 

stackoverflow 답변을 보면 깃허브 링크가 있는데 둘 다 확인해보고 또 다른 깃허브에 달린 글을 보면 알 수 있는 게,

결국 이 에러는 문서 답변을 보면 Vite에서 발생하는 에러라고 한다.

Nuxt 3에서는 Webpack 5와 Vite를 제공하지만 공식문서를 보면 기본값으로 Vite를 번들러로 사용하고 있다.

 

그래서 우선 이 에러를 해결했는지가 중요한데,

에러가 발생했던 컴퓨터의 사용자 계정이 HAN'S 였던 관계로 계정을 변경하려면 귀찮았기 때문에 좀 더 정상적인(?) 계정을 가지고 있는 노트북을 통해 Nuxt 3 프로젝트 생성 후 실행해보니까 에러 없이 정상적으로 동작하였다.

 

예전에도 일을 할 때 경로 때문에 문제가 생긴 적이 있었는데, 역시 경로 관련 에러를 피하기 위해서는 계정이나 폴더명 등을 무난하게 적는 게 베스트인 것 같다.