Решение проблемы с белым экраном на более старых версиях андроид для Capacitor

Установив последнюю версию Capacitor и Android можно столкнуться с тем, что приложение в эмуляторе с более старой версией андроид не работает – только белый экран. При этом все работает в последней или одной из последних версий Андроид.

Есть 2 основные причины, которые можно увидеть при дебаге.

Дебаг

После запуска эмулятора переходим в chrome://inspect/#devices

Находим наш девайс, на котором не работает приложение, и нажимаем Inspect.

Решение двух типов ошибок

1. Uncaught ReferenceError: globalThis is not defined

Если ошибка имеет текст Uncaught ReferenceError: globalThis is not defined
 то:

1. устанавливаем библиотеку @ungap/global-this при помощи команды npm i @ungap/global-this
2. Добавляем в файл 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