ESM và CommonJS khác nhau ở đâu, và vì sao trộn hai loại lại đau đến thế?

Hệ quả thực tế hay gặp nhất là lỗi ERR_REQUIRE_ESM: một thư viện chuyển sang ESM thuần, code của bạn còn CJS, và không có cách nào require nó đồng bộ vì ESM có thể có top-level await. Cách thoát là await import() động, hoặc chuyển cả dự án sang ESM. Node 22 trở đi đã nới bằng require(esm) cho các module không có top-level await, nhưng vẫn cần biết ranh giới đó ở đâu.

Khác biệt thứ hai ít được nhắc: ESM xuất ra BINDING sống, CJS xuất ra giá trị đã sao chép. Nếu module A gán lại biến đã export, bên import ESM sẽ thấy giá trị mới, còn bên require giữ nguyên giá trị cũ. Chi tiết này hiếm khi gặp nhưng khi gặp thì rất khó gỡ, vì nó trông như bug logic chứ không như bug module.

Về tree shaking, điều đáng nói là nó không miễn phí: nó chỉ hoạt động khi module không có side effect, và bundler cần bạn khai "sideEffects": false trong package.json để tự tin loại bỏ. Một thư viện import file CSS ở cấp module coi như có side effect, và cả cây phụ thuộc đó ở lại trong bundle. Đây là lý do rất phổ biến khiến “đã dùng ESM mà bundle vẫn to”.