Как исправить ошибку chunkloaderror в next js и продолжить работу

Ошибка ChunkLoadError в Next.js может возникнуть по нескольким причинам, связанным с загрузкой динамически импортируемых модулей или рандомизацией кодов. Эта ошибка может проявляться, когда браузер не может загрузить часть JavaScript-кода, необходимую для работы приложения. Вот несколько шагов и предложений по устранению этой проблемы:

1. Проверьте консоль и логи

Первым шагом является просмотр консоли браузера и логов серверной части. Это может дать представление о том, какой именно чанк не загружается и почему.

2. Убедитесь, что все зависимости установлены

Иногда проблема может быть связана с недостающими зависимостями или несовместимостью версий. Используйте следующую команду для проверки и установки зависимостей:

npm install
# или
yarn install

3. Проверьте наличие ошибок в коде

Ошибка ChunkLoadError часто возникает из-за недоступных или неправильно импортируемых модулей. Проверьте все динамические импорты и убедитесь, что пути к файлам указаны правильно.

4. Используйте статические маршруты для крупных компонентов

Если вы используете динамическое импортирование для больших компонентов, попробуйте вместо этого использовать статические маршруты, чтобы минимизировать вероятность возникновения ошибки загрузки чанка.

5. Очистите кэш

Иногда проблема может возникнуть из-за кэшированных файлов. Очистите кэш браузера или попробуйте открыть приложение в режиме инкогнито. Также можно использовать следующие команды для удаления кэша:

npm run build
npm run start

6. Настройка серверной части

Если у вас есть настройки серверной части, убедитесь, что там правильная конфигурация. Например, если вы используете CDN для обслуживания статических файлов, убедитесь, что все чанки правильно загружаются.

7. Обработка ошибок в useEffect

Когда вы работаете с динамическим импортом, добавьте обработчики ошибок, чтобы ваш компонент мог корректно реагировать на ошибки. Например, при использовании useEffect:

import dynamic from 'next/dynamic';
import { useState, useEffect } from 'react';

const DynamicComponent = dynamic(() => import('./MyComponent').catch(err => {
  console.error(err);
  return () => <div>Error loading component</div>;
}));

const MyApp = () => {
  return <DynamicComponent />;
};

8. Используйте Source Maps

Source Maps могут помочь вам отладить, откуда именно происходит ошибка. Убедитесь, что вы ведете записи об ошибках и используете source maps для лучшего понимания проблемы.

9. Обновите Next.js

Проверьте, не доступна ли новая версия Next.js. Возможно, проблема уже была исправлена в более поздних версиях. Используйте:

npm update next
# или
yarn upgrade next

ChunkLoadError: Loading chunk ... failed значит, что браузер не смог загрузить один из файлов JavaScript, на которые Next.js делит приложение. Обычно браузер ищет файл от старой сборки, которого уже нет.

Во время разработки

Чаще всего помогает очистить кэш сборки и перезапустить сервер:

rm -rf .next
npm run dev

Затем обновите страницу с очисткой кэша: Ctrl + Shift + R (на Mac — Cmd + Shift + R).

Если не помогло:

• переустановите зависимости: rm -rf node_modules package-lock.json && npm install;
• проверьте, не открыто ли приложение в нескольких вкладках со старой версией;
• отключите расширения браузера, которые блокируют скрипты.

После деплоя

Пользователь открыл сайт, вы выкатили новую версию, старые файлы удалились — при переходе на другую страницу браузер не находит старый чанк. Что делать:

• Не удаляйте файлы прошлой сборки сразу. Хостинги вроде Vercel хранят их сами. На своём сервере оставляйте .next/static предыдущей версии хотя бы на сутки.
• Перезагружайте страницу при ошибке. Ловите ошибку и обновляйте страницу один раз:

window.addEventListener('unhandledrejection', (event) => {
  if (event.reason?.name === 'ChunkLoadError' && !sessionStorage.getItem('reloaded')) {
    sessionStorage.setItem('reloaded', '1');
    window.location.reload();
  }
});

sessionStorage не даёт странице перезагружаться бесконечно, если ошибка повторяется.

Неверный путь к статике

Если ошибка у всех пользователей сразу после деплоя, проверьте настройки:

• basePath и assetPrefix в next.config.js совпадают с адресом, по которому открыт сайт;
• CDN или nginx отдают файлы из /_next/static/ со статусом 200.

Откройте вкладку Network в DevTools и посмотрите, какой файл не загрузился и с каким статусом.

React и Next.js разбирают в профессии «Фронтенд-разработчик».