Me gustaría usar dos componentes esbeltos no relacionados en dos páginas distintas de un sitio web, digamos /cats y /dogs así que en main.js tengo
import App from './App.svelte'; //this is empty import ListCats from './ListCats.svelte'; import ListDogs from './ListDogs.svelte'; new ListCats({ target: document.querySelector('#list-cats'), }); new ListDogs({ target: document.querySelector('#list-dogs'), }); const app = new App({ target: document.body }); export default app;El problema es ese error:
Uncaught Error: 'target' is a required option at new SvelteComponentDev (index.mjs:1993:19) at new ListDogs (ListDogs.svelte:76:39) at main.js:9:1 at main.js:24:2 Esto surge porque la página /cats no tiene #list-dogs y /dogs no tiene #list-cats y ambas páginas importan el mismo bundle.js de svelte.
¿Cómo puedo evitar este problema?
probar
let target = document.querySelector('#list-cats'); if (target) new ListCats({ target }); target = document.querySelector('#list-dogs'); if (target) new ListDogs({ target });