Горячая перезагрузка перестала работать после настройки среды для работы

Question

Несколько дней назад я начал новую роль разработчика и внес некоторые изменения в среду, чтобы адаптироваться к работе. С тех пор моя горячая перезагрузка / быстрое обновление полностью перестала работать. Изменения не отображаются, даже если я обновляю страницу вручную. Показывает изменения только тогда, когда я останавливаю сервер разработки и перезапускаю его с помощью npm run dev. Индикатор треугольника в правом нижнем углу должен быть активным, показывая активную перезагрузку окна (он больше не отображается постоянно, и если это так, страница перезагружается, но, увы, предлагаемые изменения не видны)

Контекст:

• Это влияет на все мои приложения NextJS и React. Даже запуск базового шаблона проекта со страницы примеров NextJS показывает, что горячая перезагрузка не работает.
• Я исследовал эту проблему, и кажется, что неправильный импорт (например, импорт компонентов с использованием строчных букв или файлов в каталоге страниц с заглавной буквы) может вызвать это, но я прочесал код и не могу обнаружить никаких проблем (конечно, я мог его пропустить но моя кодовая база составляет более 300 файлов).
• Рабочие службы в фоновом режиме могут вызывать проблемы, но я очистил свой браузер от всех из них, чтобы быть уверенным, и он по-прежнему не исправляет это.
• Я установил ngrok для туннелирования в рабочих целях и docker-compose для обработки рабочего разработчика. среда.
• Убедился, что использую последнюю версию Next. Даже удалил node_modules и запустил npm install. Удалил .next и папку out, и все равно не повезло.

У кого-нибудь есть идеи или подсказки, что мне следует попробовать дальше? Это связано с тем, что я установил для работы? Что-то связанное с кодом VS или WSL2? Кажется таким загадочным, что это произошло в одночасье. Спасибо за любую информацию или совет!

Информация о системе ОС: Windows (виртуализация WSL2 для кода VS) Браузер: Chrome Версия Next.js: 10.0.3 Версия Node.js: 14.8.0 Развертывание: npm run dev для разработки; усилить публикацию для хостинга AWS

Answer 1

Проблема в WSL2. Я использую WSL2 внутри VS Code; что является большим повышением производительности в среде Linux. Проблема в том, что WSL2 фактически находится в «виртуализации» и поэтому не может одновременно отправлять информацию из VS Code И браузера (localhost:3000).

Это большая проблема, над которой они работают, и пока нет решения для нее. Вот почему быстрое обновление не работает, потому что localhost не получает вносимые изменения. Либо прокси, либо вернитесь к WSL1 https://github.com/microsoft/WSL/issues/4769

_{Решение, предоставленное OP по разделу вопросов}

Answer 2

Добавить .envфайл или .env.localфайл в свой корень и поместите в него эту строку:

      WATCHPACK_POLLING=true 

Теперь перезапустите сервер.

Answer 3

Проблема с WSL2. Я использую WSL2 внутри VS Code. Но проекты React JS и Next JS не перезагружаются автоматически. Итак, добавьте в корень файл .env или .env.local (рекомендуется) и поместите в него следующие строки:

       WATCHPACK_POLLING=true
CHOKIDAR_USEPOLLING=true

Теперь перезапустите сервер.

Answer 4

Спасибо, я столкнулся с той же проблемой с WSL2. Я просто переключаюсь на терминал Windows, и он работает.

Answer 5

Если вы запустите Poweshell от имени администратора и запустите

wsl.exe -l -v

Это даст вам представление о wsl, на котором работают ваши дистрибутивы.

Я лично использую Ubuntu, и вот результат

Ubuntu Running 2 docker-desktop Stopped 2 docker-desktop-data Stopped 2

Чтобы переключиться на wsl 1,

Пробег wsl.exe --set-version Ubuntu 1

и если ты хочешь переключиться обратно, беги, wsl.exe --set-version Ubuntu 2.

Это сработало для меня.

Answer 6

В своих проектах реагирования я просто добавляю в свой файл .env в корневую папку проекта значения

FAST_REFRESH=false
CHOKIDAR_USEPOLLING=true

и это работает! Наслаждайтесь !