CSS fallback “old style”: indikasi asset gagal (cek Network/Console)

Troubleshooting Odoo 19 CE – CSS Fallback “Old Style”

Fokus: “CSS fallback old style” = indikasi asset gagal (cek Network/Console)

1. Ringkasan Masalah

Saat membuka Odoo (mis. http://localhost:8070), halaman login/halaman web tampil seperti memakai style jadul dan muncul pesan fallback CSS. Ini biasanya berarti request /web/assets/* gagal (404/500) atau kompilasi bundle SCSS/CSS gagal di server.

Gejala yang paling mudah dikenali

• Tampilan login tidak memakai theme modern Odoo (terasa minimal/jadul).

• Muncul pesan: “Style error. The style compilation failed…” atau “A css error occured, using an old style to render this page”.

• Di Network tab, sering ada request /web/assets/* status 404/500.

• Di Console tab, muncul error terkait assets (CSS/JS) / gagal load bundle.

2. Tujuan Diagnosis (Network/Console)

Di sub-materi ini kita fokus pada cara tercepat untuk:

• memastikan masalahnya memang ada di asset pipeline

• menemukan request asset mana yang gagal

• lalu mengarah ke root cause (nama file SCSS + nomor baris) dari log server

3. Langkah Troubleshooting (cek Network/Console dulu)

Langkah 1 – Buka halaman dengan mode debug assets

Buka:

• http://localhost:8070/web/login?debug=assets

Catatan:

• Jika database bukan website, tetap fokusnya ke /web/assets/*.

• ?debug=assets membuat analisis lebih mudah (tidak terlalu “dibundling”).

Langkah 2 – Network tab: cari request /web/assets/ yang gagal

1. Tekan F12 → tab Network

2. Centang Disable cache (selama DevTools terbuka)

3. Refresh (Ctrl+F5)

4. Filter: ketik assets atau /web/assets/

5. Cari status 404 atau 500

Pola umum:

• 404 Not Found: URL asset ada, tapi attachment/bundle belum terbentuk atau cache corrupt.

• 500 Internal Server Error: server gagal membuat bundle (sering karena error SCSS, file hilang, dependency compiler, atau theme custom).

Langkah 3 – Console tab: tangkap error yang “mengunci” penyebab

6. Buka tab Console

7. Cari error merah saat refresh

8. Klik stack trace (kalau ada) untuk lihat modul/asset yang memicu

9. Cocokkan dengan request gagal di Network

Catatan:

• Kalau Console sepi, Network 404/500 pada /web/assets/ sudah cukup menyimpulkan asset pipeline bermasalah.

Langkah 4 – Buka Response dari request asset yang gagal

10. Klik request /web/assets/... yang statusnya 500

11. Buka tab Response/Preview

12. Cari kata kunci: Style error, Compilation failed, scss, sass, atau path file .scss

Kalau response 500 tidak detail, penyebab pastinya hampir selalu ada di log server Odoo.

Langkah 5 – Ambil penyebab pasti dari log Odoo (wajib)

Cari kata kunci:

• scss, sass, assets, Style error, Compilation failed, FileNotFoundError, Undefined variable, Undefined mixin

Biasanya log akan menunjuk:

• path file .scss

• nomor baris

• jenis error (variable/mixin tidak dikenal, import gagal, file tidak ada)

Langkah 6 – Perbaiki akar masalah (paling sering: custom addon/theme)

• Jika log menunjuk SCSS di custom addon: perbaiki syntax/import/variable/mixin yang tidak kompatibel Odoo 19.

• Jika log menunjuk file tidak ditemukan: cek __manifest__.py bagian assets, pastikan path & file benar-benar ada.

• Jika memakai theme/website: upgrade/uninstall sementara theme untuk memastikan sumbernya.

Langkah 7 – Paksa rebuild asset agar fallback hilang

Opsi A (paling bersih) hapus attachment assets di DB:

• DELETE FROM ir_attachment WHERE url LIKE '/web/assets/%';

Opsi B paksa rebuild dengan upgrade modul web:

• odoo-bin -d NAMA_DB -u web --stop-after-init

Lalu:

• restart service Odoo

• hard refresh browser (Ctrl+F5)

Langkah 8 – Jika hanya 1 PC yang error: cek environment & permission

• Pastikan Odoo di PC itu memakai environment Python yang benar (dependency SCSS tersedia).

• Pastikan user service Odoo bisa write ke data_dir (odoo.conf) dan folder %TEMP%.

• Jika perlu whitelist folder Odoo dan data_dir di antivirus.

Dependency (bila memang kurang):

• python -m pip install -U libsass

4. Checklist Akhir

• Di Network: tidak ada lagi /web/assets/* yang 404/500

• Di log server: tidak ada error scss/sass/assets saat buka /web/login

• Halaman login kembali tampil modern (bukan fallback)

• Akses PC ini dan PC lain konsisten (tidak tergantung cache lama)

5. Catatan Pencegahan

• Setiap tambah SCSS di custom addon: pastikan path assets benar, file ada, kompatibel Odoo 19.

• Saat error terjadi: mulai dari Network/Console → lalu ambil root cause dari log server.

• Setelah perubahan asset: lakukan upgrade modul relevan + rebuild asset (jangan hanya Update Apps List).