Solución de problemas
Consulta la guía de solución de problemas de Rollup para obtener más información también.
Si estas sugerencias no funcionan, prueba colocando tus preguntas en las discusiones de GitHub o en el canal #help
de ViteLand Discord.
CLI
Error: No se puede encontrar el módulo 'C:\foo\bar&baz\vite\bin\vite.js'
La ruta a la carpeta de tu proyecto puede incluir &
, que no funciona con npm
en Windows (npm/cmd-shim#45).
Necesitarás:
- Cambiar a otro gestor de paquetes (por ejemplo,
pnpm
,yarn
) - Eliminar
&
de la ruta a tu proyecto
Servidor de desarrollo
Las solicitudes se congelan para siempre
Si estás utilizando Linux, los límites del descriptor de archivo y los límites de inotify pueden estar causando el problema. Como Vite no empaqueta la mayoría de los archivos, los navegadores pueden solicitar muchos archivos que requieren muchos descriptores de archivo, superando el límite.
Para resolver esto:
Aumenta el límite del descriptor de archivo con
ulimit
shell# Verifica el límite actual $ ulimit -Sn # Cambia el límite (temporal) $ ulimit -Sn 10000 # Es posible que también debas cambiar el límite estricto # Reinicia tu navegador
Aumenta los siguientes límites relacionados con inotify con
sysctl
shell# Verifica el límite actual $ sysctl fs.inotify # Cambia el límite (temporal) $ sudo sysctl fs.inotify.max_queued_events=16384 $ sudo sysctl fs.inotify.max_user_instances=8192 $ sudo sysctl fs.inotify.max_user_watches=524288
Si los pasos anteriores no funcionan, puedes intentar agregar
DefaultLimitNOFILE=65536
como una configuración sin comentarios a los siguientes archivos:/etc/systemd/system.conf
/etc/systemd/user.conf
Para Linux Ubuntu, es posible que debas agregar la línea * - nofile 65536
al archivo /etc/security/limits.conf
en lugar de actualizar los archivos de configuración de systemd.
Ten en cuenta que estas configuraciones persisten pero se requiere un reinicio.
Las solicitudes de red dejan de cargarse
Al usar un certificado SSL autofirmado, Chrome ignora todas las directivas de almacenamiento en caché y vuelve a cargar el contenido. Vite se basa en estas directivas de almacenamiento en caché.
Para resolver el problema, utiliza un certificado SSL de confianza.
Consulta: Problemas de caché, Problemas de Chrome
MacOS
Puedes instalar un certificado de confianza a través de la CLI con este comando:
security add-trusted-cert -d -r trustRoot -k ~/Library/Keychains/login.keychain-db your-cert.cer
O importándolo a la aplicación Acceso a Llaveros y actualizando la configuración de confianza del certificado a "Confiar siempre".
431 Campos de la Cabecera de la Petición Demasiado Grandes
Cuando el servidor / el servidor WebSocket recibe una cabecera HTTP grande, la petición será descartada y se mostrará la siguiente advertencia.
El servidor ha respondido con el código de estado 431. Ver https://es.vitejs.dev/guide/troubleshooting.html#_431-campos-de-la-cabecera-de-la-peticion-demasiado-grandes.
Esto se debe a que Node.js limita el tamaño del encabezado de la solicitud para mitigar CVE-2018-12121.
Para evitar esto, intenta reducir el tamaño del encabezado de la solicitud. Por ejemplo, si la cookie es larga, elimínala. O puedes usar --max-http-header-size
para cambiar el tamaño máximo de la cabecera.
HMR
Vite detecta un cambio de archivo pero el HMR no funciona
Es posible que estés importando un archivo con un caso diferente. Por ejemplo, src/foo.js
existe y src/bar.js
contiene:
import './Foo.js' // debe ser './foo.js'
Problema relacionado: #964
Vite no detecta un cambio de archivo
Si estás ejecutando Vite con WSL2, Vite no puede ver los cambios de archivos en algunas condiciones. Ver opción server.watch
.
Ocurre un refresco completo en lugar de HMR
Si Vite o un complemento no maneja HMR, se producirá un refresco completo.
Además, si hay un bucle de dependencia, se producirá un refresco completo. Para resolver esto, intenta eliminar el bucle.
Gran cantidad de actualizaciones de HMR en la consola
Esto puede deberse a una dependencia circular. Para resolver esto, intenta romper el bucle.
Compilación
El archivo integrado no funciona debido a un error de CORS
Si la salida del archivo HTML se abrió con el protocolo file
, los scripts no se ejecutarán con el siguiente error.
El acceso a la secuencia de comandos en 'file:///foo/bar.js' desde el origen 'null' ha sido bloqueado por la política de CORS: las solicitudes de origen cruzado solo se admiten para esquemas de protocolo: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
Solicitud de origen cruzado bloqueada: la política del mismo origen no permite leer el recurso remoto en file:///foo/bar.js. (Razón: solicitud CORS no http).
Consulta Motivo: la solicitud CORS no es HTTP - HTTP | MDN para obtener más información sobre por qué sucede esto.
Debes acceder al archivo con el protocolo http
. La forma más fácil de lograr esto es ejecutar npx vite preview
.
Otros
Módulo externalizado para compatibilidad con navegadores
Cuando usas un módulo de Node.js en el navegador, Vite mostrará la siguiente advertencia.
El módulo "fs" se ha externalizado para compatibilidad con el navegador. No se puede acceder a "fs.readFile" en el código del cliente.
Esto se debe a que Vite no reinserta automáticamente los módulos de Node.js.
Recomendamos evitar el uso de módulos de Node.js para código del navegador para reducir el tamaño del paquete, aunque puedes agregar polyfills manualmente. Si el módulo se importa desde una biblioteca de terceros (que está destinado a ser utilizado en el navegador), se recomienda informar el problema a la biblioteca respectiva.
Se produce un error de sintaxis/error de tipo
Vite no puede manejar y no admite código que solo se ejecuta en modo no estricto (modo desapercibido). Esto se debe a que Vite usa ESM y siempre está en modo estricto dentro de ESM.
Por ejemplo, es posible que veas estos errores.
[ERROR] Las declaraciones With no se pueden usar con el formato de salida "esm" debido al modo estricto
TypeError: no se puede crear la propiedad 'foo' en booleano 'false'
Si este código se usa dentro de las dependencias, podrías usar patch-package
(o yarn patch
o pnpm patch
) para una trampilla de escape.