HtmlToImage Chrome 64 SecurityError: не удалось прочитать свойство cssRules из CSSStyleSheet: нет доступа к правилам

Я только что исправил эту ошибку.

Разветвил библиотеку и сделал запрос на перенос. Пока он не будет объединен, вы можете использовать разветвленное репо: https://github.com/kmap-io/html-to-image

заменив цель html-to-image в вашем package.json на:

"html-to-image": "git+https://github.com/kmap-io/html-to-image.git"

О баге

Chrome жалуется (выдает ошибку) на попытку чтения несуществующего свойства. Firefox тоже жалуется, но выдает только предупреждение, а не ошибку. Исправление состоит в замене

if (sheet.cssRules) {
  ...

с участием

if (sheet.hasOwnProperty('cssRules')) {
  ...

Обратной стороны нет (например: когда cssRules существует на sheet, который является таблицей стилей, скрипт выполняет итерацию по правилам и добавляет их в документ, как и предполагалось).

Как исправить (пока он не будет объединен).

По какой-то причине простая замена репозитория библиотеки на вилку, в которой я зафиксировал изменение, не работает для этого пакета. Я попросил автора библиотеки добавить инструкции о том, как строить после запроса на вытягивание, поскольку они заявляют в readme запросы на вытягивание, и предложения приветствуются. А пока вот как применить исправление с помощью patch-package:

• добавьте "prepare": "patch-package" в scripts, в package.json вашего проекта
• npm i patch-package --save-dev
• В node_modules/html-to-image/lib/embedWebFonts.js измените строку 7 с

try {

к

if (sheet.hasOwnProperty('cssRules')) try {

• npx patch-package html-to-image

Если у вас есть сценарий развертывания, который создает ваш проект с нуля, вам необходимо применить исправления прямо перед вызовом npm run build (или аналогичного, в зависимости от вашего стека):

git apply --ignore-whitespace patches/*.patch

Вот об этом.

Когда исправление будет объединено, вам нужно будет запустить:

npx patch-package html-to-image --reverse