🤔 오류 내용

vite로 만든 프로젝트에 webGL Shader인 vertex shader, fragment shader를 따로 .glsl 확장자의 파일로 만들어서 관리하려고 했으나

vertex.glsl?import:1 Uncaught SyntaxError: Unexpected identifier 'vec2' (at vertex.glsl?import:1:9)

.glsl 확장자를 인식하지 못해서인가.. vec2부터 syntax error가 떴다.

✨ 해결 방법

먼저 터미널을 열어서

yarn add vite-plugin-glsl@1.0.2 --save-dev

또는

npm i vite-plugin-glsl@1.0.2 --save-dev

로 glsl 관련한 vite 플러그인을 설치해 주고,

프로젝트 루트 위치에 vite.config.js 파일을 하나 만들어 준 다음,

import glsl from "vite-plugin-glsl";

export default {
  plugins: [glsl()],
};

작성해 주고, 서버가 실행 중이라면 서버를 한 번 껐다가 재실행시켜 주면 정상적으로 vite가 glsl 파일을 인식하게 한다.