Ai từng sử dụng ReactJs thì cũng hiểu rằng nó là một bộ thư viện tuyệt với cho công việc triển khai một dự án theo mô hình single page.
Bởi sự tiện lợi và đặc biệt là cực kỳ nhiều thư viện. Khi bạn có chức năng, biết yêu cầu rồi thì vấn đề của bạn bây giờ là từ khóa tìm kiếm để có thể tìm ra đúng thư viện viết sẵn của người ta. Sau đó bạn chỉ cần install vào project UI là sử dụng thôi, quá tiện lợi.
Bên cạnh sự tiện lợi thì cũng có những vấn đề khá củ chuối, trong đó có một vấn đề khá nhức nhối là chủ sử hữu thư viện đã thêm quá nhiều package phụ thuộc vào bên trong thư viện. Tức là muốn chạy thư viện này phải bắt buộc phải cài một loạt thư viện khác, điều đó gây ra không ít rắc rối cho người phát triển.
Chẳng hạn trường hợp của mình là sử dụng thư viện @aws-amplify để phát triển một Shopify app Embedded. Tức là App của mình sẽ được đưa vào Shopify Admin dưới dạng nhúng trong một IFRAME.
"aws-amplify": "^3.0.22",
"aws-amplify-react": "^4.1.21",
"aws-appsync": "^4.0.0",
"aws-appsync-react": "^4.0.0",
Mọi thứ đều rất tốt đẹp cho đến khi cụ Chrome đưa ra cơ chế tự động block cookies và localStorage của những third-party khi chạy ở chế độ Private Mode (ẩn danh).
Thế là khi người dùng ở chế độ Private Mode thì app của mình lăn ra chết vì cái lỗi
Fails to load in an private/incognito browser session within an iframe
Mở chế độ debugger thì cụ thể là lỗi
Failed to read the 'localStorage' property from 'Window': Access is denied for this document
Mình đã dò trong Project của mình xem có sử dựng cookies, localStorage không thì chẳng thấy sử dụng. Điều tra kỹ hơn thì do trong thư viện @aws-amplify bắt buộc cài đặt thêm package paho-mqtt, thư viện này lại sử dụng đến localStorage.
Thế là ăn cám, phải tìm phương án để xử lý cho vấn đề này, không thể bắt người sử dụng đi tắt chế độ block cookies và localStorage ở private mode được.
Cách thứ nhất phải xóa cái localStorage đó khỏi thư viện paho-mqtt hoặc cách thứ 2 là bỏ hẳn cái thư viện này ra khỏi @aws-amplify.
Cách thứ 2 có vẻ không khả thi nên mình chọn cách thứ nhất, tìm và loại bỏ từ khóa localStorage khỏi các file js trong thư viện node_modules\paho-mqtt\paho-mqtt.js.
Sau khi tìm và loại bỏ thì vấn đề đặt ra là làm thế nào để sử dụng được bản hot fix này. Và sau một ngày mò mẫm thì tìm ra được cách là sử dụng patch-package để tạo ra một version hot-fix cho riêng dự án của mình.
Mình code trên môi trường window nên cách làm như sau:
Bước 1. Mở project bằng Visual Studio Code, sau đó mở file node_modules\paho-mqtt\paho-mqtt.js sửa và lưu lại.
Bước 2. Sử dụng terminal của Visual Studio Code chạy lệnh
npx patch-package paho-mqtt
Trong thư mục project sẽ xuất hiện một thư mục patches, và trong thư mục sẽ là một version paho-mqtt+1.1.0.patch (máy mình nó hiện vậy)
Bước 3. Chạy tuần tự tiếp các lệnh trên terminal, để add và commit code bạn vừa sửa lên git
git add patches/paho-mqtt+1.1.0.patch
git commit -m "fix paho-mqtt.js in paho-mqtt"
Bước 4. Thêm đoạn Script sau vào file package.json nếu trong file đó chưa có scripts
"scripts": {
"postinstall": "patch-package"
}
Nếu trong file package.json đã có sẵn "scripts", bạn chỉ cần thêm vào trong scripts đoạn sau
"postinstall": "patch-package"
Bước 5. Chạy lệnh patch-package tiếp trên terminal để hoàn thành công đoạn cuối
npm i patch-package
Thế là xong, debug thấy chạy ầm ầm, build code lên Shopify app, chạy mượt mà ở cả chế độ Normal và Private Mode (ẩn danh).
0 comments:
Đăng nhận xét
Có nhận xét mới