Quiero migrar mi proyecto Vue 2 de webpack a Vite . Y tiene que usar componentes web de terceros que se compilaron con lit-element .
Esos componentes arrojan errores durante el tiempo de ejecución (por vue):
Elemento personalizado desconocido: < foo-component > - ¿registró el componente correctamente? Para componentes recursivos, asegúrese de proporcionar la opción "nombre".
Y también (por elemento iluminado )
No se pudo establecer la propiedad 'adoptedStyleSheets' en 'ShadowRoot': no se pudo convertir el valor a 'CSSStyleSheet'.
Por lo que puedo ver, esos componentes web de terceros solo hacen esto en sus archivos de índice (dentro de node_modules ):
import FooComponent from './FooComponent'; customElements.define('foo-component', FooComponent); Entonces, antes (con la configuración del paquete web), simplemente los importé y todo solía funcionar. Bueno, en realidad para webpack lit-scss-loader también se usó para esos componentes.
Supongo que Vite tal vez necesite alguna configuración adicional, o tal vez se necesite algo similar al cargador "webpack", pero no estoy seguro de en qué dirección debo moverme.
¿Qué estoy haciendo mal?
Configure @vite/plugin-vue para ignorar los elementos Lit, por ejemplo, elementos que comienzan con my-lit en su nombre registrado:
// vite.config.js import { defineConfig } from 'vite' export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { // treat all components starting with `my-lit` as custom elements isCustomElement: tag => tag.startsWith('my-lit'), }, }, }), ], })