Webpack → Vite: Migrasi Bundler Storybook

Saya memigrasikan bundler Storybook dari Webpack ke Vite. Dalam proses ini, berbagai masalah muncul secara berantai dan pada akhirnya kami harus mengubah tech stack yang ada.

Perubahan tech stack

• [Tech stack sebelumnya] Storybook v6.5, builder-webpack5, Node v18, Yarn 1
• [Tech stack akhir] Storybook v7, react-vite, Node v18, Pnpm

---

Masalah yang muncul saat migrasi

1. Masalah kompatibilitas versi Webpack 4 dan OpenSSL 3

• Penjelasan masalah

  • Dalam proses migrasi dari builder-webpack5 ke builder-vite, muncul masalah kompatibilitas versi OpenSSL
  • Webpack versi di bawah 5.61.0 menggunakan OpenSSL versi lama, dan setelah itu menggunakan OpenSSL 3
  • Storybook v6 menggunakan Webpack 4 sebagai builder default, dan menyediakan Webpack 5 sebagai opsi
  • Saat itu kami memilih Webpack 5, dan karena menggunakan builder-webpack5 yang memakai Webpack ^5.9.0, error OpenSSL tidak terjadi
  • builder-vite yang dimigrasikan, meskipun melakukan build dengan Vite, pada Storybook v6 tetap menggunakan Webpack 4 sebagai builder default secara internal, sehingga muncul masalah kompatibilitas versi OpenSSL

• Solusi: Migrasi ke Storybook v7

  • Di Storybook v7, saat menggunakan Vite, Storybook tidak lagi menggunakan Webpack4 secara internal, sehingga error OpenSSL tidak terjadi

2. Penggunaan dependency dengan versi berbeda akibat hoisting di Yarn 1

• Penjelasan masalah

  • Di paket @isaacs/cliui, string-width@5 berformat ESM dan string-width@4 berformat CommonJS (CJS) digunakan melalui alias string-width-cjs
  • Yarn 1 melakukan hoisting paket dependency duplikat ke root node_modules, sehingga paket dapat mengakses dependency yang tidak diinstal olehnya
  • Karena string-width@4 dan @5 adalah sub-dependency yang digunakan berulang oleh banyak paket, keduanya di-hoist ke root node_modules
  • Di antara paket string-width, cli-table3 yang berformat CJS mencoba mengakses string-width@4, tetapi karena alias tersebut versi yang sama tidak ada, ia me-resolve string-width@5 yang berformat ESM sehingga menimbulkan masalah kompatibilitas modul

• Solusi: Mengganti package manager ke pnpm yang tidak menimbulkan phantom dependency

[tk1583]

Pertanyaan. Apakah ada alasan mengapa tidak menggunakan esbuild-loader di webpack?

Jawaban.

Kami menggunakan Vite untuk memanfaatkan fitur Native ESM.

Setahu saya, esbuild-loader adalah loader yang memungkinkan penggunaan esbuild di Webpack. Jika menggunakan esbuild-loader, kecepatan build memang menjadi sangat cepat, tetapi tetap harus melalui proses bundling.

Sebaliknya, dengan Native ESM, hanya modul yang digunakan saja yang di-build lalu dikirim ke browser, dan jika modul berubah, hanya modul yang berubah itu saja yang di-build, sehingga lebih cepat.

Untuk kasus seperti Storybook, ketika hanya komponen tertentu yang diminta, kami menilai lebih baik menggunakan Native ESM, sehingga memilih Vite.