Почему пустая белая страница — 3 причины и первое, что нужно открыть

Знакомо до боли: собрал приложение, открываешь в браузере — и белый экран. Пусто. Первая мысль: «всё сломалось». Особенно обидно, когда минуту назад работало.

Но вот что успокаивает: пустая страница почти никогда не пустая на самом деле. В 9 случаях из 10 сломалась одна строчка, а браузер прямо сейчас шёпотом говорит тебе, какая — просто ты не туда смотришь. Разберём тройку причин, с самой частой. И первое движение — одно на все три.

Первым делом — открой консоль

Не гадай, не переписывай код наугад. Открой инструменты разработчика: F12 (или правой кнопкой → «Просмотреть код» → вкладка Console). Консоль — это место, куда браузер пишет, что пошло не так.

Белая страница с красной строкой в консоли — это не тупик, это подсказка с адресом проблемы: файл и номер строки. С этого и начинаем.

Причина 1. Ошибка в JavaScript (самая частая)

Если ты собираешь на React, Vue или чистом JS — это причина №1. Один компонент упал с ошибкой, и весь интерфейс не отрисовался. Такая уж механика: одна ошибка в JS может снять с экрана всё сразу.

Как проверить. В консоли красным будет что-то вроде Uncaught TypeError: Cannot read properties of undefined (reading 'map') — и рядом файл со строкой. Кликни на строку — прыгнешь прямо в место падения.

Как починить. Чаще всего это обращение к данным, которых ещё нет: items.map(...), где items пока undefined (не загрузились). Поставь защиту: items?.map(...) или проверь if (!items) return null до отрисовки. Не понимаешь текст ошибки — скопируй его целиком и попроси ИИ помочь с отладкой: вставь ошибку и кусок кода из указанной строки, а не только «у меня белый экран».

Причина 2. Не тот путь к файлам (особенно после деплоя)

Классика: локально всё работает, задеплоил — белый экран. Значит, браузер не смог загрузить твои скрипты и стили: пути к файлам съехали.

Как проверить. В инструментах разработчика открой вкладку Network и обнови страницу. Если файлы .js/.css горят красным со статусом 404 — они не найдены. Частый признак: локально сайт открывается по адресу вроде example.com/, а задеплоился в подпапку example.com/my-app/, и все пути ищутся не там.

Как починить. Настрой базовый путь (base path) под то место, где реально живёт сайт. В большинстве сборщиков это одна настройка: base (Vite), homepage (Create React App), basePath (Next.js). Ещё частая мелочь: ты открыл файл двойным кликом как file://... вместо запуска через локальный сервер — тогда пути тоже ломаются. Запускай через dev-сервер, а не открытием html из папки.

Причина 3. Пустой корень — рендерить некуда

Приложению нужен «якорь» в HTML — элемент, в который оно вставит интерфейс. Если якоря нет или id не совпал, код отработает, но рисовать будет некуда — экран останется пустым.

Как проверить. В консоли ищи Target container is not a DOM element или null при обращении к элементу. Это про DOM — дерево элементов страницы. Открой index.html: там должен быть <div id="root"></div> (или #app), а в коде — getElementById('root') с тем же id.

Как починить. Сверь id в HTML и в JS буква в букву. root в html и app в коде — классический промах: элемент не находится, рендерить некуда. Приведи к одному имени — страница оживёт.

У меня белый экран, но в консоли пусто. Что это?

Тогда причина обычно не в JS, а в стилях: контент есть, но он невидимый (display: none, белый текст на белом фоне, нулевая высота контейнера). Проверь вкладку Elements — если элементы в дереве есть, а на экране нет, копай в CSS: почему не работает CSS.

Почему локально работает, а после деплоя белый экран?

Почти всегда — Причина 2: пути к файлам. Локальный сервер отдаёт файлы от корня, а на хостинге сайт может лежать в подпапке или собираться иначе. Начни с вкладки Network и поиска 404 — это самый быстрый способ подтвердить догадку.

Помогает ли просто перезагрузить страницу?

Иногда — если дело в старом кэше: жми хард-рефреш (Ctrl+Shift+R или Cmd+Shift+R), он тянет свежие файлы вместо сохранённых. Но если причина в самом коде — упавший JS, кривой путь, пустой корень — обычная перезагрузка не спасёт: ошибка воспроизведётся снова. Поэтому первый шаг всё равно консоль, а не F5 по кругу.