Estoy tratando de usar lottie-player en mi proyecto vue 3, pero siempre recibo la advertencia de que Vue no pudo resolver el componente lottie-player. Estoy siguiendo los documentos oficiales de lottieFiles ( https://lottiefiles.com/web-player ). El único navegador que no funciona es Chrome en iOS, para todos los demás navegadores y sistemas operativos probados solo muestra esa advertencia, pero funciona de todos modos.
Probé todo tipo de paquetes npm pero no encontré ninguno que funcionara para mí. Mi última idea es intentar detectar Chrome en iOS y mostrar una animación diferente allí. Pero, por supuesto, sería bueno si alguien tuviera una solución para mi problema para que no reciba esa advertencia. Quiero decir que apestaría si no hay una forma adecuada de usar lottieFiles en Vue 3, ¿verdad? lottie docs Vue advertencia
Actualmente estoy actualizando LottieFiles vue-lottie-player para que funcione con Vue3 y, a medida que ajustamos el reproductor lottie-web, ¡también me encontré con esta misma advertencia!
Logró eliminarlo agregando
isCustomElement: tag => tag === 'lottie-player'dentro de mi archivo vue.config.js. Aquí está la configuración completa, puede ignorar todas las demás cosas:
//Compiler options const path = require(`path`); module.exports = { configureWebpack: { resolve: { symlinks: false, alias: { vue: path.resolve(`./node_modules/vue`) } } }, chainWebpack: config => { config.resolve.alias.set('vue', '@vue/compat') config.module .rule('vue') .use('vue-loader') .tap(options => { return { ...options, compilerOptions: { compatConfig: { MODE: 2 }, isCustomElement: tag => tag === 'lottie-player' } } }) } }Enlace al reproductor vue: https://github.com/LottieFiles/lottie-vue
Para cualquier persona que tenga problemas con Vite2x+, cambie su archivo vite.config.js en consecuencia:
import { fileURLToPath, URL } from 'url' import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // https://vitejs.dev/config/ export default defineConfig({ plugins: [vue({ template: { compilerOptions: { //✅ here isCustomElement: tag => tag === 'lottie-player' } } }) ], resolve: { alias: { '@': fileURLToPath(new URL('./src', import.meta.url)) } } })