Beberapa hal yang sering menjadi kendala ketika menggunakan Vite dan cara mengatasinya.

Hai,

Beberapa bulan belakangan ini sering kali menggunakan Vite untuk membuat project baru apabila ingin menggunakan React JS.
Terlebih sekarang create-react-app sudah tidak disupport jadi beralih menggunakan Vite.

Setelah mencoba beberapa kali, terdapat beberapa kendala dan kebingungan ketika menggunakan Vite ini.

Ditulisan kali ini, aku ingin share beberapa kendala yang aku hadapi ketika menggunakannya.

1. Hot reload vite it’s not working.

Sering kali ketika menggunakan vite, ketika membuat component yang banyak atau menulis baris code yang panjang, terjadi kendala tidak singkronnya browser dengan editornya.
Dimana meskipun di terminal/code editor menunjukkan updated tetapi di browser tidak reload sama sekali.

Browser dan code editor tidak singkron

2. Image dengan format Svg

Ketika akan menggunakan svg,harus ada beberapa configurasi yang dilakukan, jika tidak maka akan terjadi error.

Lalu bagaimana cara mengatasi masalahnya?

Berikut beberapa cara mengatasinya.

1.Hot Reload vite with React is not working.

Bisa memberikan beberapa configurasi seperti ini di vite.config.js

vite.config.js

Note: karena di project ini aku menggunakan Typescript maka menggunakan .tsx, kalau kalian menggunakan Javascript kalian bisa menggunakan .jsx

2.Menambahkan plugin vite-plugin-svgr.
- Install vite-plugin-svgr

Sesuaikan dengan package manager yang kalian gunakan.

Lalu di vite.config.js

configurasi vite-plugin-svgr

Sumber:
1. https://vitejs.dev/
2. https://www.npmjs.com/package/vite-plugin-svgr
3. https://www.freecodecamp.org/news/how-to-import-svgs-in-react-and-vite/
4. https://stackoverflow.com/questions/70996320/enable-hot-reload-for-vite-react-project-instead-of-page-reload