I'd like to use two unrelated svelte compoents on two distincpages of a website say /cats and /dogs so in main.js I have
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;
The prblem is that 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
This arises becasue /cats page does not have #list-dogs and /dogs does not have #list-cats and both pages import the same bundle.js of svelte.
How can I avoid this problem?
try
let target = document.querySelector('#list-cats');
if (target) new ListCats({ target });
target = document.querySelector('#list-dogs');
if (target) new ListDogs({ target });