0
422
Views"TypeError: no se puede convertir indefinido en objeto" solo después de vite build, antes, con vide dev, todo funciona perfectamente
Estoy usando Vite combinado con React y Typescript. Cuando ejecuto vite dev , la versión en vivo del sitio web funciona perfectamente, ni siquiera hay errores en la consola.
Cuando ejecuto vite build y luego vite preview , todo lo que veo es una página en blanco y TypeError: can't convert undefined to object error en la consola.
No puedo rastrear el problema en mi código porque el error ocurre después de la compilación/minimización, pero solo para estar seguro, agregué comprobaciones de seguridad en las instancias en las que llamo a Object.keys() .
Este es el segmento del código donde comienza el error:
Object.keys(pd).forEach(function (e) { if (pd[e] === 0) Xd.prototype["on" + e] = function () { this.scope.emit(e); }; else if (pd[e] === 1) Xd.prototype["on" + e] = function (t) { this.scope.emit(e, t); }; });Editar:
Estaba revisando el código minimizado y justo antes del bloque largo de código donde está el error, vi un MuiTouchRipple. Estoy usando la biblioteca MaterialUI, ¿es posible que la biblioteca esté causando este problema? Intenté actualizar de la versión 5.4.2 a la 5.6.3, pero después de la compilación sigue fallando.
1 answers
Answer question0
Logré arreglarlo.
Publicando los pasos de depuración para los novatos como yo.
Depurar
1. Deshabilitar la minimización
Esto le permite ver el código original, todavía está en forma de paquete, por lo que aún no puede identificar el archivo exacto donde está el problema, pero al menos sabe algo más. (en mi caso específico, ya que estoy usando vite, tuve que cambiar una variable en el archivo de configuración, consulte https://vitejs.dev/config/#build-minify ).
2. Cambiar las opciones del compilador mecanografiado
En mi caso, el objetivo y el módulo se configuraron en ESNext, tratar de cambiarlo a ES6 o a commonjs ayudó a tener un mejor código de búsqueda. (ver https://www.tsmean.com/articles/learn-typescript/typescript-module-compiler-option/ )
3. Busca el código que provoca el error
Cuando traté de buscar el código en vscode no apareció. Esa es una buena señal, ¡al menos mi código no estaba causando el problema!
Pero al mismo tiempo: ¿y ahora qué?
La solución que encontré es deshabilitar las carpetas excluidas de vscode de la búsqueda (de forma predeterminada, vscode no busca en node_modules ), o usar grep -r en la carpeta del proyecto. Encontré que este último es más rápido y más eficiente.
Solución
En mi caso específico, el problema era una biblioteca antigua que no se ha actualizado en años ( https://www.npmjs.com/package/react-html-parser ). Una vez que lo eliminé, todo comenzó a funcionar.