[Typescript] Uncaught Error : Style were unable to be assigned to a file 에러 해결

문제 상황

Vite, React 프로젝트에서 build를 할 때 문제가 발생

에러 메시지

Uncaught Error: Styles were unable to be assigned to a file.
This is generally caused by one of the following:

You may have created styles outside of a '.css.ts' contextYou may have incorrect configuration.
See https://vanilla-extract.style/documentation/getting-started
at getFileScope (@vanilla-extract_css.js?v=7bd645b3:2929:11) 
at generateIdentifier (@vanilla-extract_css.js?v=7bd645b3:3120:7)
at createVar (@vanilla-extract_css.js?v=7bd645b3:3195:48)
at @vanilla-extract_css.js?v=7bd645b3:3236:12 at walkObject (@vanilla-extract_css.js?v=7bd645b3:258:20)
at walkObject (@vanilla-extract_css.js?v=7bd645b3:260:20)
at createThemeContract (@vanilla-extract_css.js?v=7bd645b3:3235:10)
at createGlobalTheme (@vanilla-extract_css.js?v=7bd645b3:3253:38)
at App.css.ts:3:21

문제 원인

Uncaught Error: Styles were unable to be assigned to a file.
스타일 파일이 적용되지 않았을 때 발생하는 오류

이는 스타일 .css.ts 확장자를 가진 파일 내에 Vanilla Extract 스타일이 정의되지 않았을 때 발생합니다.

해결 과정

1. .css.ts 확장자 파일 확인 → 문제 없음

2. npm i @vanilla-extract/css 설치 확인 → 문제 없음

3. style 파일에 @vanilla-extract/css 확인
   import { style, container } from '@vanilla-extract/css'; → 문제 없음

4. 프로젝트 설정 파일 (ex. tsconfig.json, vite.config.ts ..) 확인
   vite.config.ts 파일에 @vanilla-extract/vite-plugin가 빠졌다는 것을 파악

이전 :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
});

이후 :

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react(), vanillaExtractPlugin()],
});

@vanilla-extract/vite-plugin은 Vite와 Vanilla Extract 기능을 통합하는 플로그인으로,
Vite의 빌드 프로세스에 Vanilla Extract를 연결해 자동으로 스타일을 처리하고 최적화 합니다.

package를 설치할 때 프로젝트 설정 파일에 적용되었는지 확인하자🎈