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?
CodePudding user response:
try
let target = document.querySelector('#list-cats');
if (target) new ListCats({ target });
target = document.querySelector('#list-dogs');
if (target) new ListDogs({ target });