Решение проблемы с белым экраном на более старых версиях андроид для Capacitor
Установив последнюю версию Capacitor и Android можно столкнуться с тем, что приложение в эмуляторе с более старой версией андроид не работает — только белый экран. При этом все работает в последней или одной из последних версий Андроид.
Есть 2 основные причины, которые можно увидеть при дебаге.
Дебаг
После запуска эмулятора переходим в chrome://inspect/#devices
Находим наш девайс, на котором не работает приложение, и нажимаем Inspect.
Решение двух типов ошибок
1. Uncaught ReferenceError: globalThis is not defined
Если ошибка имеет текст Uncaught ReferenceError: globalThis is not defined
то:
- устанавливаем библиотеку @ungap/global-this при помощи команды
npm i @ungap/global-this
- Добавляем в файл polyfills.ts строчку
import 'globalthis/auto';
ВАЖНО!!! Строчку в файл polyfills.ts добавлять надо до import 'zone.js';
. Если добавить после, то ошибка возникнет раньше, чем произойдет импорт.
2. ionic … SyntaxError: Unexpected token …
Ошибки плана ionic (index):821 SyntaxError: Unexpected token '='
могут возникать, когда билд не рассчитан на более старую версию Chrome.
Для решения добавляем в файл .browserslistrc вот такой код:
Chrome >=60 Firefox >=63 Edge >=79 Safari >=13 iOS >=13
Это поможет запускать приложение на Android 9 и, возможно, более старых (не проверял). Нужную версию Chrome минимальную можно увидеть в описании девайса на странице @ungap/global-this