📘 Mengatasi Masalah: PDF.js Viewer Tidak Tampil di OJS (viewer.mjs) Pada Server Ngink

📌 Masalah Umum

Saat membuka artikel PDF di OJS dengan plugin PDF.js Viewer, muncul error seperti:

Failed to load module script: Expected a JavaScript or Wasm module script but the server responded with a MIME type of "application/octet-stream".

Atau:

404 Not Found - viewer.mjs

---

🔍 Penyebab

1. File viewer.mjs tidak ditemukan karena struktur folder PDF.js Viewer belum ditautkan dengan benar.

2. MIME type salah, seperti application/octet-stream, bukan application/javascript, sehingga browser menolak menjalankan file .mjs.

---

✅ Langkah-Langkah Perbaikan

1. Cek Lokasi File viewer.mjs

find /var/www/html/ojs_app/ -name "viewer.mjs"

🔍 Misalnya hasilnya:

/var/www/html/ojs_app/plugins/generic/pdfJsViewer/pdf.js/web/viewer.mjs

---

2. Buat Symlink Agar Bisa Diakses via URL

Karena file ada di subfolder pdf.js/web, buat symbolic link ke dalam folder js:

cd /var/www/html/ojs_app/plugins/generic/pdfJsViewer
ln -s pdf.js/web js

📌 Hasilnya: URL https://ejurnal.unisa.ac.id/plugins/generic/pdfJsViewer/js/viewer.mjs bisa diakses.

---

3. Perbaiki MIME Type di Konfigurasi Nginx

Edit konfigurasi Nginx:

sudo nano /etc/nginx/sites-available/ojs

Tambahkan blok ini untuk memastikan file .js dan .mjs dikenali dengan MIME type yang benar:

location ~* \.(js|mjs)$ {
    default_type application/javascript;
    try_files $uri =404;
}

💡 Letakkan sebelum location ~ \.php agar tidak tertimpa.

---

4. Tes Konfigurasi dan Restart Nginx

sudo nginx -t
sudo systemctl restart nginx

---

5. Uji Koneksi

Gunakan curl untuk memastikan file bisa diakses dan MIME type-nya benar:

curl -I https://ejurnal.unisa.ac.id/plugins/generic/pdfJsViewer/js/viewer.mjs

✅ Hasil yang benar:

HTTP/1.1 200 OK
Content-Type: application/javascript

---

📎 Catatan Tambahan

• Jika file lain seperti gambar (bg.png, dll.) tidak tampil:

  • Cek letaknya.

  • Buat symlink serupa seperti:

    ln -s pdf.js/web/images images
    

• Selalu restart Nginx setelah melakukan perubahan konfigurasi.

---

📁 Struktur Direktori Setelah Perbaikan

plugins/
└── generic/
    └── pdfJsViewer/
        ├── js  -> pdf.js/web
        └── pdf.js/
            └── web/
                ├── viewer.mjs
                ├── viewer.html
                └── images/

---

🧠 Tips

• Gunakan Ctrl + F5 untuk refresh browser cache saat melakukan perubahan.

• Simpan backup konfigurasi Nginx sebelum mengedit.