Поиск Неисправностей
См. Руководство по устранению неполадок Rollup для получения дополнительной информации.
Если предложения здесь не работают, попробуйте разместить вопросы о дискуссиях GitHub или в #help
канале Vite Land Discord .
CJS
Vite CJS Node API устарел
Сборка CJS API узла Vite устарел и будет удален в Vite 6. См. Обсуждение GitHub для большего контекста. Вы должны обновить свои файлы или фреймворки, чтобы импортировать сборку ESM Vite.
В базовом проекте Vite убедитесь:
- Содержание файла
vite.config.js
использует синтаксис ESM. - Самый близкий
package.json
файл имеет"type": "module"
или используйте расширение.mjs
, например.mts
vite.config.mjs
илиvite.config.mts
.
Для других проектов есть несколько общих подходов:
- Настройте ESM в качестве по умолчанию, при необходимости выберите CJS: добавьте
"type": "module"
в проектpackage.json
. Все*.js
файла теперь интерпретируются как ESM и должны использовать синтаксис ESM. Вы можете переименовать файл с расширением.cjs
, чтобы продолжать использовать CJS. - Держите CJS в качестве по умолчанию, зарегистрируйте ESM, если это необходимо: если у проекта
package.json
нет"type": "module"
, все*.js
файла интерпретируются как CJS. Вы можете переименовать файл с расширением.mjs
для использования ESM. - Динамически импортировать VITE: если вам нужно продолжать использовать CJS, вы можете динамически импортировать VITE, используя
import('vite')
вместо этого. Это требует, чтобы ваш код был записан вasync
контексте, но все равно должно быть управляемым, поскольку API VITE в основном асинхронно.
Если вы не уверены, откуда берется предупреждение, вы можете запустить свой сценарий с флагом VITE_CJS_TRACE=true
, чтобы зарегистрировать трассу стека:
VITE_CJS_TRACE=true vite dev
Если вы хотите временно игнорировать предупреждение, вы можете запустить свой сценарий с флагом VITE_CJS_IGNORE_WARNING=true
:
VITE_CJS_IGNORE_WARNING=true vite dev
Обратите внимание, что файлы конфигурации PostCSS пока не поддерживают ESM + TypeScript ( .mts
или .ts
в "type": "module"
). Если у вас есть конфигурации PostCSS с .ts
и добавили "type": "module"
в Package.json, вам также необходимо переименовать конфигурацию PostCSS для использования .cts
.
КЛИ
Error: Cannot find module 'C:\foo\bar&baz\vite\bin\vite.js'
Путь к папке проекта может включать &
, что не работает с npm
в Windows ( NPM/CMD-Shim#45 ).
Вам нужно будет либо:
- Переключитесь на другой диспетчер пакетов (например,
pnpm
,yarn
) - Удалить
&
с пути к вашему проекту
Конфигурация
Этот пакет только ESM
При импорте пакета ESM только на require
происходит следующая ошибка.
Не удалось разрешить "Foo". Этот пакет только ESM, но он был попытка загрузить на
require
.
Error [err_require_esm]: require () es es module /path/to/dependency.js из /пат/vite.config.js не поддерживается. Вместо этого измените требование index.js в /пат/vite.config.js на динамический импорт (), который доступен во всех модулях CommonJS.
В node.js <= 22 файлы ESM не могут быть загружены require
по умолчанию.
Хотя он может работать с использованием --experimental-require-module
или node.js> 22, или в других времени запуска, мы все еще рекомендуем преобразовать вашу конфигурацию в ESM.
- добавление
"type": "module"
к ближайшемуpackage.json
vite.config.mts
vite.config.js
vite.config.ts
доvite.config.mjs
failed to load config from '/path/to/config*/vite.config.js'
Не удалось загрузить конфигурацию из '/path/to/config*/vite.config.js' Ошибка при запуске Dev Server: Ошибка: сборка не удалась с 1 ошибкой: Ошибка: необходимо использовать «Outdir», когда есть несколько входных файлов
Приведенная выше ошибка может произойти, если путь к папке вашей проекта содержит *
, который Esbuild рассматривает как глобус. Вам нужно будет переименовать свой каталог, чтобы удалить *
.
Dev Server
Запросы останавливаются навсегда
Если вы используете Linux, ограничения дескриптора файлов и ограничения INOTIFIE могут вызвать проблему. Поскольку VITE не объединяет большинство файлов, браузеры могут запросить множество файлов, которые требуют множества файловых дескрипторов, превышающих предел.
Чтобы решить это:
Увеличить предел дескриптора файла на
ulimit
shell# Проверьте предел тока $ ulimit -Sn # Предел изменения (временный) $ ulimit -Sn 10000 # Вам также может потребоваться изменить жесткий лимит # Перезапустите свой браузер
Увеличьте следующие инатирование связанных пределов на
sysctl
shell# Проверьте пределы тока $ sysctl fs.inotify # Изменить ограничения (временные) $ sudo sysctl fs.inotify.max_queued_events=16384 $ sudo sysctl fs.inotify.max_user_instances=8192 $ sudo sysctl fs.inotify.max_user_watches=524288
Если вышеуказанные шаги не работают, вы можете попробовать добавить DefaultLimitNOFILE=65536
в качестве некомментированной конфигурации в следующие файлы:
- /etc/systemd/system.conf
- /etc/systemd/user.conf
Для Ubuntu Linux вам может потребоваться добавить строку * - nofile 65536
в файл /etc/security/limits.conf
вместо обновления файлов SystemD Config.
Обратите внимание, что эти настройки сохраняются, но требуется перезапуск .
В качестве альтернативы, если сервер работает внутри VS -кода DevContainer, запрос может показаться остановленным. Чтобы решить эту проблему, посмотрите Dev Containers / VS кодовый порт .
Сетевые запросы перестают загружать
При использовании саморегистрированного сертификата SSL Chrome игнорирует все директивы кэширования и перезагружает контент. VITE полагается на эти директивы кэширования.
Для решения проблемы используйте доверенный сертификат SSL.
См.: Проблемы с кешем , проблема хрома
macOS
Вы можете установить доверенный сертификат через CLI с этой командой:
security add-trusted-cert -d -r trustRoot -k ~/Library/Keychains/login.keychain-db your-cert.cer
Или, импортируя его в приложение Access KeyChain и обновив доверие вашего сертификата, чтобы «всегда доверять».
431 Поля Заголовка Запроса Слишком Большие
Когда сервер / WebSocket Server получит большой заголовок HTTP, запрос будет отброшен, и будет показано следующее предупреждение.
Сервер ответил кодом состояния 431. См .
Это связано с тем, что node.js ограничивает размер заголовка запроса, чтобы смягчить CVE-2018-12121 .
Чтобы избежать этого, постарайтесь уменьшить размер заголовка запроса. Например, если печенье длинное, удалите его. Или вы можете использовать --max-http-header-size
, чтобы изменить размер заголовка максимума.
Dev Containers / vs Кодовый Порт
Если вы используете функцию Dev Container или переадресацию порта в VS -коде, вам может потребоваться установить опцию server.host
на 127.0.0.1
в конфигурации, чтобы он работал.
Это связано с тем, что функция пересылки порта в VS -коде не поддерживает IPv6 .
Смотрите #16522 для более подробной информации.
HMR
VITE обнаруживает изменение файла, но HMR не работает
Вы можете импортировать файл с другим случаем. Например, src/foo.js
существует и src/bar.js
содержит:
import './Foo.js' // должен быть './foo.js'
Связанная проблема: #964
VITE не обнаруживает изменение файла
Если вы запускаете VITE с WSL2, VITE не может смотреть изменения файла в некоторых условиях. Смотрите опцию server.watch
.
Полная перезагрузка происходит вместо HMR
Если HMR не обрабатывается VITE или плагином, произойдет полная перезагрузка, поскольку это единственный способ обновить состояние.
Если HMR обрабатывается, но он находится в пределах круговой зависимости, также произойдет полная перезагрузка для восстановления порядка выполнения. Чтобы решить это, попробуйте сломать петлю. Вы можете запустить vite --debug hmr
, чтобы зарегистрировать путь круговой зависимости, если изменение файла запустило его.
Строить
Построенный файл не работает из -за ошибки CORS
Если выход HTML -файла был открыт с помощью file
протокола, сценарии не будут выполняться со следующей ошибкой.
Доступ к скрипту по адресу 'file: //foo/bar.js' из Origin 'null был заблокирован политикой CORS: запросы перекрестного происхождения поддерживаются только для схемы протокола: HTTP, данные, изолированное приложение, хромирование, Chrome, Https, Chrome-Untrucked.
Заблокирован перекрестного происхождения: такая же политика происхождения, не давая чтению удаленного ресурса в файле: //foo/bar.js. (Причина: CORS запросит не http).
См. Причина: CORS запросить, а не http - http | Mdn] ( https://developer.mozilla.org/en-us/docs/web/http/cors/errors/corsrequestnothttp ) для получения дополнительной информации о том, почему это происходит.
Вам нужно будет получить доступ к файлу с помощью http
протокола. Самый простой способ достичь этого - запустить npx vite preview
.
Оптимизированные Зависимости
Устаревшие предварительно связанные DEPS при связывании с местной пакетом
Ключ -хэш, используемый для недействительной оптимизированной зависимости, зависит от содержимого блокировки пакета, патчей, применяемых к зависимостям, и параметров в файле конфигурации Vite, которые влияют на объединение модулей узлов. Это означает, что VITE будет обнаружен, когда зависимость переопределяется с использованием функции в качестве переопределения NPM , и повторно сбрасывать ваши зависимости от начала следующего сервера. VITE не лишает аннулирования зависимостей, когда вы используете такую функцию, как ссылка NPM . В случае, если вы ссылаетесь или распределите зависимость, вам нужно будет заставлять повторную оптимизацию на начале следующего сервера с помощью vite --force
. Вместо этого мы рекомендуем использовать переопределения, которые теперь поддерживаются каждым диспетчера пакетов (см. Также переопределения PNPM и разрешения пряжи ).
Производительность Узких Мест
Если вы страдаете от каких-либо узких мест производительности приложения, приводящих к медленной загрузке, вы можете запустить инспектор встроенного Node.js с вашим сервером Vite Dev или при создании вашего приложения для создания профиля ЦП:
vite --profile --open
vite build --profile
Vite Dev Server
После того, как ваше приложение будет открыто в браузере, просто ожидайте завершения загрузки, а затем вернитесь к клемме и нажмите клавишу p
(остановит инспектор node.js), затем нажмите q
клавишу, чтобы остановить сервер Dev.
Инспектор Node.js будет генерировать vite-profile-0.cpuprofile
в корневой папке, перейдите по адресу https://www.speedscope.app/ и загрузите профиль ЦП, используя кнопку BROWSE
, чтобы осмотреть результат.
Вы можете установить Vite-Plugin-Inspect , который позволяет осмотреть промежуточное состояние плагинов VITE, а также помочь вам определить, какие плагины или средние войны являются узким местом в ваших приложениях. Плагин можно использовать как в режимах DEV, так и в режимах сборки. Проверьте файл readme для получения более подробной информации.
Другие
Модуль экстернализован для совместимости браузера
Когда вы используете модуль Node.js в браузере, Vite выведет следующее предупреждение.
Модуль «FS» был экстернализован для совместимости браузера. Не удается получить доступ к «fs.readfile» в клиентском коде.
Это связано с тем, что VITE не автоматически модули полифиль Node.js.
Мы рекомендуем избежать модулей Node.js для кода браузера, чтобы уменьшить размер пакета, хотя вы можете добавить полифиллы вручную. Если модуль импортируется из сторонней библиотеки (которая должна использоваться в браузере), рекомендуется сообщить об этой проблеме в соответствующей библиотеке.
Синтаксис ошибка / тип ошибка происходит
VITE не может обрабатывать и не поддерживает код, который работает только в не Strict Mode (неаккуратный режим). Это потому, что VITE использует ESM, и это всегда строгий режим внутри ESM.
Например, вы можете увидеть эти ошибки.
[Ошибка] С операторами нельзя использовать с выходным форматом "ESM" из -за строгого режима
TypeError: не может создать свойство «foo» на логическом 'false'
Если эти коды используются внутри зависимостей, вы можете использовать patch-package
(или yarn patch
или pnpm patch
) для люка Escape.
Расширения браузера
Некоторые расширения браузера (например, рекламные блокировки) могут помешать клиенту VITE отправлять запросы на сервер Vite Dev. В этом случае вы можете увидеть белый экран без зарегистрированных ошибок. Попробуйте отключить расширения, если у вас есть эта проблема.
Ссылки по перекрестным приводам в Windows
Если в вашем проекте есть ссылки на перекрестный диск, Vite может не работать.
Примером перекрестных приводов ссылок:
- Виртуальный диск, связанный с командой папки по
subst
- Symlink/Junction с другой дипломом по
mklink
(например, jarn global cache)
Связанная проблема: #10802