Dalam dua hari terakhir, saya mengalami kejadian aneh saat menggunakan fitur Import Data di Aplikasi Web yang dihasilkan oleh PHPMaker 2021. Tiba-tiba muncul error SyntaxError: Unexpected token < in JSON at position 0. Pernah mengalami kejadian ini? Semoga saja belum. Cukuplah saya saja yang pertama dan terakhir mengalaminya, hehehe…
Melalui tulisan ini, kita sama-sama belajar satu hal lagi yang sangat berharga dari PHPMaker 2021. Belajar untuk tetap tenang, bersabar, sambil tetap berusaha. Bagaimana tidak? Selama dua hari saya dilatih untuk tenang dan bersabar menghadapi kondisi ini, sekaligus pantang menyerah untuk mencari tahu penyebab, mengapa error ini terjadi.
Beberapa usaha sudah saya lakukan, mulai dengan membandingkan fitur Import di Aplikasi Web yang dihasilkan oleh PHPMaker 2020, semuanya berjalan dengan mulus wuss… wuss… mencoba menelusuri kode di Masino Extensions yang saya buat untuk PHPMaker, mencoba membuat ulang Extensions yang sama dengan nama lain, tetapi hasilnya tetap sama: error tetap terjadi.
Mengapa di PHPMaker 2021 menimbulkan masalah sementara di PHPMaker 2020 tidak terjadi?
Setelah dua hari, akhirnya terungkap juga penyebab dari munculnya error tersebut. Awal mulanya diketahui dari pengaturan Compile container for production yang saya aktifkan, dan pengaturan Environment yang saya pilih adalah production, yang terdapat di menu Tools -> Advanced Settings.
Jika fitur Import dijalankan lewat Aplikasi Web yang dihasilkan oleh PHPMaker 2021 dengan pengaturan tadi, maka balikan respon dari browser di bagian Network (tekan F12 di keyboard), akan berhenti sampai proses mengakses alamat direktori upload yang berada tepat di bawah sub-folder api. Kondisi ini akan men-trigger munculnya error di atas tadi.
Untuk diketahui, sub-folder upload digunakan sebagai folder tujuan tempat file .csv yang berisi data yang akan di-import diunggah ke server. Browser menampilkan kode berikut dari Network ketika mencoba mengakses khusus folder upload yang terdapat di bawah folder api:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 Final//EN"> <html> <head> <title>Index of /demo2021/api/upload</title> </head> <body> <h1>Index of /demo2021/api/upload</h1> <table> <tr><th valign="top"><img src="/icons/blank.gif" alt="[ICO]"></th><th><a href="?C=N;O=D">Name</a></th><th><a href="?C=M;O=A">Last modified</a></th><th><a href="?C=S;O=A">Size</a></th><th><a href="?C=D;O=A">Description</a></th></tr> <tr><th colspan="5"><hr></th></tr> <tr><td valign="top"><img src="/icons/back.gif" alt="[PARENTDIR]"></td><td><a href="/demo2021/api/">Parent Directory</a> </td><td> </td><td align="right"> - </td><td> </td></tr> <tr><td valign="top"><img src="/icons/folder.gif" alt="[DIR]"></td><td><a href="cache/">cache/</a> </td><td align="right">2020-11-07 08:53 </td><td align="right"> - </td><td> </td></tr> <tr><th colspan="5"><hr></th></tr> </table> <address>Apache/2.4.41 (Win64) PHP/7.4.0 Server at localhost Port 80</address> </body></html>
Ternyata, setelah proses upload file .csv tadi berhasil, sistem kemudian akan melanjutkan ke proses import data. Tapi, karena sistem membaca kode di atas, maka proses import data berhenti sampai di sana. Itulah penyebab mengapa muncul error SyntaxError: Unexpected token < in JSON at position 0, karena sistem membaca kode HTML di atas yang diawali dengan karakter <.
Jika kode html tersebut dijalankan di browser, maka akan menampilkan directory listing untuk sub-folder upload. Sementara yang sudah kita ketahui, secara default PHPMaker menggunakan nama upload/ untuk pengaturan yang terdapat di bawah lokasi: PHP -> General Options -> File Upload -> Upload folder.
Nah, di sinilah benang merahnya. Karena nama sub-folder untuk tempat mengunggah file yang digunakan untuk proses Import data tadi sama dengan nama API yang menangani proses pengunggahan file, yaitu sama-sama upload, maka sistem akan membaca directory listing milik sub-folder upload yang dibuat di dalam sub-direktori api tadi.
Jadi, bagaimana dong solusinya? Sangatlah mudah. Pastikan untuk tidak pernah lagi menggunakan upload/ pada pengaturan nama direktori yang terdapat di pengaturan PHP -> General Options -> File Upload -> Upload folder. Kita bisa menggantinya, misalnya menjadi uploads/ untuk membedakan dengan nama API dan route upload.
Hal ini berlaku jika kita menggunakan fitur Import Data di PHPMaker 2021, dan kita mengaktifkan Compile container for production, serta memilih production dari pengaturan Environment, yang terdapat di menu Tools -> Advanced Settings.
Pelajaran yang sangat penting dan berharga. Kelihatan sepele, tapi jika tidak diikuti akan menimbulkan error yang bisa menimbulkan kebingungan.
Tinggalkan Balasan