Tips dan Trik Mengatasi View Tidak Tampil OJS 3.5 Pada Server Ngink

 

📌 Masalah Umum

Ketika pengguna mencoba membuka file PDF dalam OJS (Open Journal Systems) menggunakan plugin PDF.js Viewer, terkadang 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 pesan lainnya seperti:

404 Not Found - viewer.mjs

Masalah ini menyebabkan file PDF tidak bisa ditampilkan di browser secara langsung.

---

🔍 Penyebab Masalah

Masalah ini umumnya disebabkan oleh dua hal utama:

1. File viewer.mjs tidak ditemukan
   Hal ini bisa terjadi karena struktur direktori dari plugin PDF.js Viewer belum dikonfigurasi dengan benar. File yang dibutuhkan belum ditautkan atau dikenali oleh server, sehingga URL yang seharusnya mengarah ke file tersebut menghasilkan error 404.

2. Jenis MIME (MIME type) tidak sesuai
   File dengan ekstensi .mjs (JavaScript module) harus disajikan dengan Content-Type: application/javascript. Jika server menyajikannya sebagai application/octet-stream (generic binary), maka browser akan menolak untuk mengeksekusinya, dan file tidak akan dimuat.

---

✅ Solusi dan Langkah-Langkah Perbaikan

1. Cek Lokasi File viewer.mjs

Langkah pertama adalah memastikan file viewer.mjs memang ada. Gunakan perintah berikut di terminal:

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

📌 Contoh hasil pencarian:

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

2. Buat Symbolic Link agar File Bisa Diakses via URL

Karena file viewer.mjs berada di dalam subfolder pdf.js/web, kita perlu membuat symlink (tautan simbolik) ke dalam folder js agar dapat diakses oleh web server:

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

📌 Hasilnya:
File akan bisa diakses melalui URL berikut:

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

3. Atur MIME Type di Konfigurasi Nginx

Edit konfigurasi Nginx untuk memastikan ekstensi .mjs dikenali dengan MIME type yang sesuai:

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

Tambahkan blok konfigurasi berikut:

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

💡 Letakkan blok ini sebelum konfigurasi untuk file PHP (location ~ \.php) agar tidak tertimpa.

4. Tes dan Restart Nginx

Setelah mengedit konfigurasi, lakukan pengecekan sintaks Nginx dan restart layanan:

sudo nginx -t
sudo systemctl restart nginx

Pastikan tidak ada error saat testing konfigurasi (nginx -t).

5. Verifikasi Akses File dan MIME Type

Gunakan perintah curl untuk mengecek apakah file viewer.mjs sudah bisa diakses dan disajikan dengan MIME type yang benar:

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

✅ Output yang diharapkan:

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

---

📎 Catatan Tambahan

Jika file lain seperti gambar latar belakang (misalnya bg.png) atau aset lainnya tidak muncul di tampilan PDF, lakukan hal serupa:

• Periksa lokasi file gambar tersebut.

• Buat symbolic link seperti berikut:

ln -s pdf.js/web/images images

• Jangan lupa restart Nginx setelah melakukan perubahan konfigurasi apa pun.

---

📁 Struktur Direktori Setelah Perbaikan

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

---

🧠 Tips Praktis

• Gunakan Ctrl + F5 di browser untuk melakukan hard refresh dan memastikan cache lama tidak digunakan.

• Selalu backup file konfigurasi Nginx sebelum melakukan perubahan, untuk menghindari kesalahan fatal.

• Periksa file permission agar file dan folder yang baru dibuat dapat diakses oleh web server.

---

Jika kamu ingin, saya juga bisa bantu buatkan dalam format PDF atau Markdown agar bisa disimpan dan dibagikan.