JavaScript ES Modules: Import, Export & Tree Shaking

<!-- Menggunakan module script -->
<script type="module" src="main.js"></script>

<!-- Inline module -->
<script type="module">
  import { sapaan } from './utils.js';
  console.log(sapaan('Budi'));
</script>

<!-- Perbedaan: module vs classic script -->
<!-- Module: strict mode otomatis, scope terpisah, deferred loading -->
<!-- Classic: global scope, tidak deferred -->

// ====== math.js ======

// Cara 1: Export saat deklarasi
export const PI = 3.14159265358979;
export const E = 2.71828182845904;

export function tambah(a, b) {
  return a + b;
}

export function kurang(a, b) {
  return a - b;
}

export function kali(a, b) {
  return a * b;
}

export function bagi(a, b) {
  if (b === 0) throw new Error('Tidak bisa dibagi nol');
  return a / b;
}

// Cara 2: Export di akhir file (lebih rapi untuk file besar)
const akarKuadrat = (x) => Math.sqrt(x);
const pangkat = (base, exp) => Math.pow(base, exp);
const absolut = (x) => Math.abs(x);

export { akarKuadrat, pangkat, absolut };

// Export dengan alias (rename)
export { tambah as add, kurang as subtract };

// Export dengan komentar dokumentasi
/** Menghitung rata-rata dari array angka */
export function rataRata(angka) {
  if (angka.length === 0) return 0;
  return angka.reduce((a, b) => a + b, 0) / angka.length;
}

/** Menghitung median dari array angka */
export function median(angka) {
  const sorted = [...angka].sort((a, b) => a - b);
  const mid = Math.floor(sorted.length / 2);
  return sorted.length % 2 !== 0
    ? sorted[mid]
    : (sorted[mid - 1] + sorted[mid]) / 2;
}

// Import beberapa fungsi dari math.js
import { tambah, kurang, kali, bagi } from './math.js';

console.log(tambah(10, 5));   // 15
console.log(kurang(10, 5));   // 5
console.log(kali(10, 5));     // 50
console.log(bagi(10, 5));     // 2

// Import dengan alias (rename)
import { tambah as add, kali as multiply } from './math.js';
console.log(add(3, 4));        // 7
console.log(multiply(3, 4));   // 12

// Import semua named exports sebagai namespace
import * as MathLib from './math.js';
console.log(MathLib.tambah(1, 2));     // 3
console.log(MathLib.PI);              // 3.14159...
console.log(MathLib.rataRata([1,2,3])); // 2

// ====== models/User.js ======
export class User {
  constructor(nama, email, role = 'member') {
    this.nama = nama;
    this.email = email;
    this.role = role;
    this.createdAt = new Date();
  }

  getDisplayInfo() {
    return `${this.nama} (${this.email}) - ${this.role}`;
  }

  isAdmin() {
    return this.role === 'admin';
  }
}

export class AdminUser extends User {
  constructor(nama, email, permissions = []) {
    super(nama, email, 'admin');
    this.permissions = permissions;
  }

  hasPermission(permission) {
    return this.permissions.includes(permission);
  }
}

// ====== app.js ======
import { User, AdminUser } from './models/User.js';

const userBaru = new User('Budi', 'budi@email.com');
const adminBaru = new AdminUser('Sari', 'sari@email.com', ['read', 'write', 'delete']);

console.log(userBaru.getDisplayInfo());
// "Budi (budi@email.com) - member"

console.log(adminBaru.hasPermission('delete')); // true

// ====== Cara 1: Inline default export ======

// Export class sebagai default
export default class Kalkulator {
  constructor() {
    this.hasil = 0;
  }

  tambah(n) { this.hasil += n; return this; }
  kurang(n) { this.hasil -= n; return this; }
  kali(n)   { this.hasil *= n; return this; }
  reset()   { this.hasil = 0; return this; }
  getHasil() { return this.hasil; }
}

// Export function sebagai default
export default function buatLogger(prefix) {
  return function(message) {
    const waktu = new Date().toLocaleTimeString('id-ID');
    console.log(`[${waktu}] [${prefix}] ${message}`);
  };
}

// Export arrow function sebagai default
export default (items) => items.filter(Boolean).map(item => item.trim());

// ====== Cara 2: Deklarasi terpisah ======
function formatRupiah(angka) {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR',
    minimumFractionDigits: 0,
  }).format(angka);
}

export default formatRupiah;

// ====== Cara 3: Default export object/konfigurasi ======
const konfigurasi = {
  apiUrl: 'https://api.example.com',
  timeout: 5000,
  retries: 3,
  debug: false,
};

export default konfigurasi;

// ====== Default + Named dalam satu file ======
// models/Produk.js

// Default export — satu per file
export default class Produk {
  constructor(nama, harga) {
    this.nama = nama;
    this.harga = harga;
  }
}

// Named exports — bisa banyak per file
export const KATEGORI_ELEKTRONIK = 'elektronik';
export const KATEGORI_PAKAIAN = 'pakaian';
export const KATEGORI_MAKANAN = 'makanan';

export function formatHargaProduk(produk) {
  return `${produk.nama}: Rp ${produk.harga.toLocaleString('id-ID')}`;
}

// Import default — nama bebas, tidak perlu kurung kurawal
import Kalkulator from './Kalkulator.js';

const calc = new Kalkulator();
calc.tambah(10).kali(2).kurang(5);
console.log(calc.getHasil()); // 15

// Import default dengan nama berbeda (alias)
import FormatRupiah from './formatRupiah.js';
console.log(FormatRupiah(150000)); // "Rp 150.000"

// Import default + named sekaligus
import Produk, { KATEGORI_ELEKTRONIK, formatHargaProduk } from './Produk.js';

const laptop = new Produk('Laptop ASUS', 12000000);
console.log(formatHargaProduk(laptop));
// "Laptop ASUS: Rp 12.000.000"

// Import default sebagai namespace berbeda
import Logger from './logger.js';
const logAplikasi = Logger('APP');
const logDatabase = Logger('DB');
logAplikasi('Aplikasi dimulai');    // [14:30:00] [APP] Aplikasi dimulai
logDatabase('Koneksi terbuka');     // [14:30:00] [DB] Koneksi terbuka

// Import default dan rename semua named exports
import DefaultComp, {
  helperA as utilA,
  helperB as utilB,
  CONSTANT as CONST
} from './myModule.js';

// ====== 1. Named imports ======
import { useState, useEffect, useCallback } from 'react';
import { format, parseISO, differenceInDays } from 'date-fns';

// ====== 2. Default import ======
import axios from 'axios';
import React from 'react';

// ====== 3. Default + Named ======
import React, { useState, useEffect } from 'react';

// ====== 4. Namespace import (semua exports sebagai objek) ======
import * as helpers from './helpers.js';
console.log(helpers.formatDate(new Date()));
console.log(helpers.validateEmail('test@mail.com'));

// ====== 5. Side-effect import (jalankan kode tanpa import values) ======
import './styles/global.css';
import './polyfills.js';
import './analytics.js';

// ====== 6. Import dengan alias ======
import { calculateTotal as hitungTotal } from './utils/calculation.js';
import { User as Pengguna } from './models/User.js';

// ====== 7. Gabungan import ======
import DefaultExport, {
  namedExport1,
  namedExport2,
  namedExport3 as alias3,
} from './complexModule.js';

// ====== 8. Import dari package (node_modules) ======
import lodash from 'lodash';
import { v4 as uuidv4 } from 'uuid';

// ====== 9. Import JSON (Node.js dengan assert) ======
import data from './config.json' assert { type: 'json' };

// ====== 10. Import URL (browser) ======
import { teknik } from 'https://cdn.example.com/lib.js';

// Import assertion (proposal lama, beberapa browser)
import data from './data.json' assert { type: 'json' };

// Import attributes (proposal baru — diganti keyword 'with')
import data from './data.json' with { type: 'json' };

// Import CSS module (eksperimental)
import styles from './Button.module.css' with { type: 'css' };

// Konsumsi dalam code
console.log(data.nama);
console.log(data.produk);

// Contoh dengan config
import appConfig from './config.json' with { type: 'json' };

function initApp() {
  return {
    apiUrl: appConfig.apiUrl,
    port: appConfig.port || 3000,
    env: appConfig.env || 'development',
  };
}

// Relative paths — diawali dengan ./ atau ../
import { helper } from './utils/helper.js';     // satu level ke bawah
import { config } from '../config/app.js';       // satu level ke atas
import { logger } from '../../lib/logger.js';    // dua level ke atas

// Absolute paths — tanpa awalan (biasanya dari node_modules atau alias)
import express from 'express';                    // dari node_modules
import { Button } from '@/components/Button.js'; // alias path

// URL paths (browser)
import { lib } from 'https://cdn.skypack.dev/lodash-es';

// Dynamic path — TIDAK BISA karena import bersifat static
// import x from path;           // ❌ Error!
// const x = await import(path); // ✅ Gunakan dynamic import

// ====== Re-export named exports ======

// utils/index.js — Re-export dari semua file di folder utils
export { formatRupiah, formatTanggal, formatWaktu } from './formatters.js';
export { validateEmail, validatePhone, validatePassword } from './validators.js';
export { debounce, throttle, deepClone } from './helpers.js';
export { default as Konstanta } from './constants.js';

// Re-export dengan alias
export {
  calculateTotal as hitungTotal,
  calculateDiscount as hitungDiskon,
  calculateTax as hitungPajak,
} from './calculations.js';

// Re-export default sebagai named
export { default as ApiClient } from './ApiClient.js';
export { default as AuthService } from './AuthService.js';

// Re-export default sebagai default (jarang tapi mungkin)
export { default } from './mainService.js';

// ====== Re-export semua dari modul ======
// Ekspor semua named exports dari module (kecuali default)
export * from './mathOperations.js';

// Ekspor semua + named default export
export * from './mathOperations.js';
export { default as MathOps } from './mathOperations.js';

// Struktur folder:
src/
├── components/
│   ├── Button.js        export default class Button { ... }
│   ├── Modal.js         export class Modal { ... }
│   ├── Navbar.js        export default class Navbar { ... }
│   ├── Card.js          export default class Card { ... }
│   └── index.js         ← BARREL FILE
├── utils/
│   ├── format.js        export function formatRupiah() { ... }
│   ├── validate.js      export function validateEmail() { ... }
│   └── index.js         ← BARREL FILE
└── main.js

// components/index.js — Barrel File
export { default as Button } from './Button.js';
export { Modal } from './Modal.js';
export { default as Navbar } from './Navbar.js';
export { default as Card } from './Card.js';

// utils/index.js — Barrel File
export * from './format.js';
export * from './validate.js';

// main.js — Import dari barrel files (sangat rapi!)
import { Button, Modal, Navbar, Card } from './components/index.js';
import { formatRupiah, validateEmail } from './utils/index.js';
// Atau tanpa /index.js (bundler resolve otomatis)
import { Button, Modal, Navbar, Card } from './components';
import { formatRupiah, validateEmail } from './utils';

// Static import — dimuat sebelum kode berjalan
import { formatRupiah } from './utils/format.js';

// Dynamic import — dimuat saat dibutuhkan
async function tampilkanHarga(harga) {
  const { formatRupiah } = await import('./utils/format.js');
  console.log(formatRupiah(harga));
}

// Dynamic import default export
async function muatKalkulator() {
  const Kalkulator = (await import('./Kalkulator.js')).default;
  const calc = new Kalkulator();
  calc.tambah(10).kali(2);
  return calc.getHasil();
}

// Dynamic import dengan conditional
async function muatLibrary() {
  if (navigator.onLine) {
    const { cloudSync } = await import('./cloudSync.js');
    await cloudSync();
  } else {
    const { offlineStorage } = await import('./offlineStorage.js');
    await offlineStorage();
  }
}

// Dynamic import dengan error handling
async function muatModul(path) {
  try {
    const modul = await import(path);
    return modul;
  } catch (error) {
    console.error(`Gagal memuat modul: ${path}`, error);
    // Fallback ke modul default
    return import('./fallback.js');
  }
}

import { lazy, Suspense, useState } from 'react';

// Lazy load komponen berat — hanya dimuat saat di-render
const Dashboard = lazy(() => import('./pages/Dashboard.js'));
const Profil = lazy(() => import('./pages/Profil.js'));
const Pengaturan = lazy(() => import('./pages/Pengaturan.js'));

// Lazy load dengan timeout
const Laporan = lazy(() => {
  return Promise.all([
    import('./pages/Laporan.js'),
    new Promise(resolve => setTimeout(resolve, 300)) // minimum loading time
  ]).then(([module]) => module);
});

// Lazy load dengan named export
const ChartKomponen = lazy(() =>
  import('./components/Chart.js').then(module => ({
    default: module.LineChart
  }))
);

function App() {
  const [halaman, setHalaman] = useState('dashboard');

  const renderHalaman = () => {
    switch (halaman) {
      case 'dashboard':   return <Dashboard />;
      case 'profil':      return <Profil />;
      case 'pengaturan':  return <Pengaturan />;
      case 'laporan':     return <Laporan />;
      default:            return <Dashboard />;
    }
  };

  return (
    <div className="app">
      <nav>
        <button onClick={() => setHalaman('dashboard')}>Dashboard</button>
        <button onClick={() => setHalaman('profil')}>Profil</button>
        <button onClick={() => setHalaman('pengaturan')}>Pengaturan</button>
        <button onClick={() => setHalaman('laporan')}>Laporan</button>
      </nav>

      {/* Suspense menampilkan fallback saat komponen sedang dimuat */}
      <Suspense fallback={<div className="loading">Memuat halaman...</div>}>
        {renderHalaman()}
      </Suspense>
    </div>
  );
}

// 1. Load library berat hanya saat dibutuhkan
async function eksporPDF(data) {
  // jsPDF cukup berat (~300KB), jadi lazy load saja
  const { jsPDF } = await import('jspdf');
  const doc = new jsPDF();

  doc.setFontSize(16);
  doc.text('Laporan Penjualan', 20, 20);

  data.forEach((item, i) => {
    doc.text(`${i + 1}. ${item.nama}: Rp ${item.harga}`, 20, 40 + (i * 10));
  });

  doc.save('laporan.pdf');
}

// 2. Load modul sesuai bahasa pengguna
async function muatTerjemahan(locale) {
  const terjemahan = await import(`./locales/${locale}.json`, {
    with: { type: 'json' }
  });
  return terjemahan.default;
}

// 3. Progressive enhancement
async function inisialisasiFitur() {
  // Load fitur dasar terlebih dahulu
  const { initBasicUI } = await import('./features/basic.js');
  initBasicUI();

  // Lalu muat fitur lanjutan secara background
  const { initAdvancedFeatures } = await import('./features/advanced.js');
  initAdvancedFeatures();
}

// 4. Module preloading (prefetch untuk performa)
function preloadModule(path) {
  const link = document.createElement('link');
  link.rel = 'modulepreload';
  link.href = path;
  document.head.appendChild(link);
}

// Preload modul yang mungkin dibutuhkan nanti
preloadModule('./features/chat.js');
preloadModule('./features/notifications.js');

// ====== db.js — Inisialisasi database ======

// Top-level await — modul menunggu koneksi sebelum diekspor
const connection = await createDatabaseConnection({
  host: 'localhost',
  port: 5432,
  database: 'myapp',
});

export const db = connection;
export const isConnected = connection.status === 'connected';

// Modul yang mengimpor db.js akan menunggu sampai koneksi siap
// import { db, isConnected } from './db.js';
// console.log(isConnected); // true (pasti sudah terkoneksi)

// ====== config.js — Muat konfigurasi ======

// Muat config dari file JSON
const config = await fetch('/api/config').then(res => res.json());

// Muat terjemahan berdasarkan bahasa browser
const locale = navigator.language || 'id-ID';
const translations = await import(`./locales/${locale}.json`, {
  with: { type: 'json' }
});

export { config, translations };

// ====== wasm.js — Load WebAssembly ======

// Load WASM module secara asynchronous
const wasmModule = await WebAssembly.instantiateStreaming(
  fetch('/lib/image-processor.wasm')
);

export const processImage = wasmModule.instance.exports.processImage;
export const wasmReady = true;

// ====== crypto.js — Inisialisasi kriptografi ======

// Generate kunci kriptografi saat modul dimuat
const keyPair = await crypto.subtle.generateKey(
  { name: 'RSA-OAEP', modulusLength: 2048, hash: 'SHA-256' },
  true,
  ['encrypt', 'decrypt']
);

export const publicKey = await crypto.subtle.exportKey('jwk', keyPair.publicKey);
export const privateKey = keyPair.privateKey; // Tidak diekspor dalam produksi!

// ====== Pattern 1: Conditional module loading ======

let storage;

try {
  // Coba load IndexedDB wrapper
  storage = await import('./storage/indexeddb.js');
} catch {
  // Fallback ke localStorage
  storage = await import('./storage/localstorage.js');
}

export default storage;

// ====== Pattern 2: Race condition (ambil yang tercepat) ======

const fastestCDN = await Promise.race([
  fetch('https://cdn1.example.com/api').then(() => 'cdn1'),
  fetch('https://cdn2.example.com/api').then(() => 'cdn2'),
  fetch('https://cdn3.example.com/api').then(() => 'cdn3'),
]);

export const CDN_URL = `https://${fastestCDN}.example.com`;

// ====== Pattern 3: Parallel initialization ======

const [userData, appConfig, featureFlags] = await Promise.all([
  fetch('/api/user').then(r => r.json()),
  fetch('/api/config').then(r => r.json()),
  fetch('/api/features').then(r => r.json()),
]);

export { userData, appConfig, featureFlags };

// ====== Pattern 4: Retry logic ======

async function fetchWithRetry(url, retries = 3) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`HTTP ${response.status}`);
      return response.json();
    } catch (err) {
      if (i === retries - 1) throw err;
      await new Promise(r => setTimeout(r, 1000 * (i + 1))); // exponential backoff
    }
  }
}

const remoteConfig = await fetchWithRetry('https://api.example.com/config');
export { remoteConfig };

// ====== utils.js — Semua fungsi tersedia ======

// ✅ Named exports — bisa di-tree shake
export function formatRupiah(angka) {
  return new Intl.NumberFormat('id-ID', {
    style: 'currency',
    currency: 'IDR'
  }).format(angka);
}

export function formatTanggal(date) {
  return new Intl.DateTimeFormat('id-ID', {
    dateStyle: 'long'
  }).format(new Date(date));
}

export function validateEmail(email) {
  return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
}

export function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
}

export function generateId() {
  return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

// ====== app.js — Hanya gunakan beberapa fungsi ======
import { formatRupiah, validateEmail } from './utils.js';

// formatTanggal, debounce, dan generateId TIDAK diimpor
// → bundler bisa menghapusnya dari bundle akhir!

console.log(formatRupiah(150000));          // "Rp 150.000"
console.log(validateEmail('test@mail.com')); // true

// Bundle akhir hanya berisi: formatRupiah dan validateEmail
// Ukuran berkurang signifikan!

// ❌ BURUK: Import seluruh library
import _ from 'lodash';
_.debounce(fn, 300);
// Bundler tidak bisa tree shake lodash karena default export adalah objek monolitik

// ✅ BAIK: Import hanya fungsi yang dibutuhkan
import debounce from 'lodash-es/debounce';
debounce(fn, 300);
// Hanya debounce yang masuk ke bundle

// ✅ BAIK: Library yang mendukung tree shaking
import { debounce } from 'lodash-es'; // lodash-es mendukung ESM
import { format } from 'date-fns';    // date-fns mendukung tree shaking
import { motion } from 'framer-motion'; // framer-motion mendukung ESM

// ❌ BURUK: Side effects di dalam modul (menghambat tree shaking)
// utils-bad.js
export const PI = 3.14;
console.log('Modul dimuat!'); // Side effect! Bundler ragu untuk menghapus
window.globalConfig = {};     // Side effect global!

// ✅ BAIK: Pisahkan side effects
// utils-pure.js — tanpa side effects, aman di-tree shake
export const PI = 3.14;

// init.js — side effects terpisah
console.log('Modul dimuat!');
import './init.js'; // Explicitly imported untuk side effects

// package.json — tandai file yang memiliki side effects
// {
//   "sideEffects": false           ← semua file aman di-tree shake
//   "sideEffects": ["*.css"]       ← CSS punya side effects
//   "sideEffects": ["./src/init.js"] ← hanya init.js yang punya side effects
// }

src/
├── features/                    ← Berdasarkan fitur, bukan tipe file
│   ├── auth/
│   │   ├── AuthContext.js        ← Context/state
│   │   ├── LoginForm.js          ← Komponen
│   │   ├── useAuth.js            ← Custom hook
│   │   ├── authApi.js            ← API calls
│   │   └── index.js              ← Barrel file
│   ├── dashboard/
│   │   ├── DashboardPage.js
│   │   ├── DashboardCharts.js
│   │   └── index.js
│   └── profile/
│       ├── ProfilePage.js
│       ├── ProfileForm.js
│       └── index.js
├── shared/                      ← Kode yang dipakai di banyak fitur
│   ├── components/
│   │   ├── Button.js
│   │   ├── Modal.js
│   │   └── index.js
│   ├── hooks/
│   │   ├── useLocalStorage.js
│   │   ├── useDebounce.js
│   │   └── index.js
│   └── utils/
│       ├── formatters.js
│       ├── validators.js
│       └── index.js
├── app.js                       ← Entry point
└── routes.js                    ← Route definitions

// ====== 1. SELALU gunakan file extension (.js) ======
// Beberapa bundler membutuhkan eksplicit extension
import { helper } from './utils/helper.js';  // ✅
import { helper } from './utils/helper';      // ❌ bisa error di Deno/native ESM

// ====== 2. Hindari circular dependencies ======
// a.js mengimpor b.js, b.js mengimpor a.js → masalah!
// Solusi: pindahkan shared code ke modul ketiga (c.js)

// ====== 3. Satu ekspor per file (Single Responsibility) ======
// ✅ Bagus: file fokus pada satu hal
// UserService.js — hanya tentang User Service
export class UserService {
  async getUser(id) { /* ... */ }
  async updateUser(id, data) { /* ... */ }
  async deleteUser(id) { /* ... */ }
}

// ❌ Kurang baik: file menangani banyak hal berbeda
// utils.js — terlalu banyak ekspor berbeda
export function formatRupiah() { /* ... */ }
export function validateEmail() { /* ... */ }
export function sendNotification() { /* ... */ }
export class DatabaseService { /* ... */ }
export const API_URL = '...';

// ====== 4. Gunakan constants terpisah ======
// constants/routes.js
export const ROUTES = {
  HOME: '/',
  LOGIN: '/login',
  DASHBOARD: '/dashboard',
  PROFILE: '/profile',
  SETTINGS: '/settings',
};

export const API_ENDPOINTS = {
  USERS: '/api/users',
  PRODUCTS: '/api/products',
  ORDERS: '/api/orders',
};

// ====== 5. Type exports (untuk TypeScript/JSDoc) ======
/** @typedef {{ id: number, nama: string, email: string }} User */

// Export type sebagai value (untuk JSDoc runtime checking)
export const UserType = Object.freeze({
  id: 'number',
  nama: 'string',
  email: 'string',
});

// ❌ 1. Mutable exports — bisa menyebabkan bug tak terduga
export let counter = 0;
export function increment() { counter++; }
// Importer mendapat binding langsung, bukan copy!

// ✅ Solusi: Gunakan getter pattern
let _counter = 0;
export function getCounter() { return _counter; }
export function increment() { _counter++; }

// ❌ 2. Import dengan side effects yang tidak disadari
import './analytics'; // Apa yang dilakukan modul ini?

// ✅ Solusi: Jelaskan mengapa Anda mengimpor side-effect module
// Load analytics untuk tracking page views
import './analytics';

// ❌ 3. Deep import dari internal package
import helper from 'some-package/lib/internal/utils/helper.js';

// ✅ Solusi: Gunakan public API
import { helper } from 'some-package';

// ❌ 4. Barrel file yang terlalu besar
// components/index.js — re-export 100+ komponen!
export { Button } from './Button';
export { Modal } from './Modal';
// ... 98 lagi

// ✅ Solusi: Sub-barrel files
// components/forms/index.js — hanya form components
// components/layout/index.js — hanya layout components

// ❌ 5. Mix CommonJS dan ESM secara acak
const fs = require('fs');         // CommonJS
import path from 'path';          // ESM
// Di Node.js, ini bisa menyebabkan error!

// ✅ Solusi: Pilih satu, konsisten
import fs from 'node:fs/promises'; // ESM sepanjang jalan
import path from 'node:path';