Vite 사용 시 발생하는 "Cannot use import statement outside a module" 오류

supabase를 사용하다가 갑자기 위와 같은 오류가 생겼습니다.

 

정확히는 @supabase/supabase-js 라이브러리를 쓰기 시작하니까 벌어진 일인데요,

 

ES모듈로 작성된 라이브러리를 vite가 처리하지 못했기 때문에 벌어진 일이었습니다.

 

해결 방법은 다음 두 가지 방법을 사용합니다.

vite는 3.1.3 버전 기준입니다.

 

1. optimizeDeps 설정

vite.config.js에서 다음과 같이 설정해줍니다.

export default {
	...
    optimizeDeps: {
    	include: ["@supabase/supabase-js"]
    }
}

 

2. external 설정

마찬가지로 vite.config.js에서 다음과 같은 값을 추가합니다.

export default {
	build: {
    		external: ["@supabase/supabase-js"]
    	}
}

이렇게하면 Vite가 CommonJS 모듈로 라이브러리를 불러올 겁니다.