component/dist/Weather/snowy.css" is not supported 에러가 발생하고 있어요~

[developer-1px]

react + typescript + vite 환경입니다.

Uncaught Error: Dynamic require of "/Users/kakao_ent/Desktop/react-season/node_modules/react-season-component/dist/Weather/snowy.css" is not supported

에러가 나고 있어요! 꼭 써보고 싶어요 고쳐주세요 +_+

import { useState } from 'react'

import { Season } from 'react-season-component';

import './App.css'

function App() {
  const [count, setCount] = useState(0)

  return (
    <div className="App">
       <Season
         type={'auto'}
       />
    </div>
  )
}

export default App

너무 예뻐요 화이팅!!!

[dante01yoon]

@developer-1px vite 환경에서는 내부적으로 dynamic require 구문을 사용해 정적 파일을 불러오는 라이브러리를 사용 시 에러가 나기 때문에 아래와 같이 commonJS를 지원하는 플러그인을 사용해야 합니다.

예시에서는 vite-plugin-commonjs 를 사용했습니다.

vite.config.js에 아래와 같이 설정해주세요.

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

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